Modern CSS SASS-szal

Nyelv: Német

Modern CSS with Sass - gyakorlati útmutató

Már mindig bosszantott téged, hogy nincsenek változók és ciklusok CSS-ben? Vége ennek! A CSS előfeldolgozók, mint például a Sass, pont ilyen dolgokat tesznek elérhetővé. Ezzel a CSS-kódot végre hatékonyan lehet generálni. A Sass mellett ebben a tutorialban természetesen meg fogjuk vizsgálni a népszerű Compass keretrendszert is, amely továbbviszi a Sass alkalmazását egy másik szintre. Ismerd meg három óra alatt a Sass és a Compass által kínált lehetőségeket.

Legyél Sass-mester Daniel Koch webfejlesztővel ebben a háromórás videó-tréningen.
Határozd meg a változókat, hozz létre saját mixineket, kísérletezz színekkel és számokkal, és végül használd a Compass-t.
Tanuld meg hatékonyan létrehozni a CSS-t, és alkalmazd az új tudásodat a jövőbeli projektekben.

Lépésről lépésre a profi CSS fejlesztés felé. Ha CSS, akkor modernen és Sass-szal - Daniel Koch megmutatja neked!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

részletek

Használható:
Tartalom: 3 h Video-tanfolyam
Licenc: magán és kereskedelmi Jogi felhasználás

Kategóriák

Webdesign, CMS & fejlesztés

Szerelemmel készítette::

Daniel Koch

Modern CSS Sass-szal

Modern CSS Sass használatával - 01 Bevezetés

Ingyenes

Modern CSS Sass-szel - 01 Bevezetés

A CSS-előfeldolgozóknak köszönhetően a CSS sokkal hatékonyabban írható. Hogy mi is ezek az előfeldolgozók, melyek léteznek, és miért esett a választás a Sass-ra ebben a sorban, azt ebben a videóban mutatják be.

Modern CSS Sass felhasználásával - 02 Az installáció

Modern CSS Sass-szel - 02 A telepítés

Mielőtt a Sass használható lennének, telepíteni kell. És ehhez szükség van a Ruby-ra. Mindkettő - azaz a Ruby és a Sass telepítése - látható ebben a videóban. Ezután azonnal kipróbálhatod, hogy tényleg sikerült-e telepíteni a Sass-t.

Modern CSS Sass használatával - 03 Ügyes kompilálás

A Sass-fájlokat CSS-fájlokká kell alakítani, hogy valóban használhatóak legyenek. A Watch parancs segítségével könnyen észlelhetitek a módosításokat egyes fájloknál vagy akár teljes könyvtárakban.

Modern CSS Sasssel – 04 fájlok egyesítése

Modern CSS Sass-szel – 04 fájlok összefűzése.

Az @import segítségével importálhatók és összevonhatók az SCSS fájlok. Hogy mi köze van mindehhez, ha az állománynevet aláhúzás előzi meg, az egy aspektusa ennek a videónak.

Modern CSS Sass használata - 05 változó deklarálása és használata

Modern CSS Sass használatával - 05 változót deklarál és használ

A Sassban lehetőség van változók deklarálására. Ez a koncepció a hagyományos CSS-ben nem elérhető, de a Sassban egy remek eszköz az stíluslapok hatékony fejlesztéséhez.

Modern CSS SASS - A "nélkül" fészek elve

Modern CSS Sass – 06 A fészekelés elve

A Nesting segítségével az Sass szintaxis sokkal karcsúbban tartható, mint ahogy az a CSS-ben szokásos. Ezen felül a fésülés segít abban, hogy a kódot sokkal átláthatóbban lehessen írni.

Modern CSS Sass - 07 Ügyes öröklés Extend segítségével

Az @extend használata lehetővé teszi, hogy átadjátok egy CSS tulajdonságok csoportját egyikről a másikra kijelölőjnek. Ez is segít abban, hogy a Sass fájlokat karcsúbbá tegyétek.

Modern CSS Sass használatával - 08 modul a helyettesítő szelektorokkal

Modern CSS Sass - 08 modul a placeholder kiválasztókkal.

A helyőrző szelektor lehetővé teszi modulok definiálását. Ez a modularizáció lehetővé teszi a Sass szintaxis felosztását logikai blokkokba, amelyek különböző helyeken beilleszthetők.

Modern CSS-t készíteni Sass-szal - 09 Mixins definiálása.

Modern CSS Sass használatával - 09 Mixin definíciója

A mixinok olyan funkciók, amelyekkel például munkafolyamatokat lehet jelentősen egyszerűsíteni. Ebben a videóban bemutatják, hogyan definiálhatjátok saját mixinjeiteket, és végül hogyan alkalmazhatjátok azokat.

Modern CSS SASS – 10 A szülőelem szelektorja.

Modern CSS és Sass – 10 A szülőelem-szűrő

A videóban említett szelektorral az elem szülőelemére tudtok hivatkozni. Ezt a szelektort ismertsen nem létezik CSS-ben, így hatalmas értéket képvisel.

Modern CSS Sass-szal - 11 Automatizálás For-ciklusokkal

Modern CSS Sass-szel – 11 Automatizálás For-ciklusokkal

A Sass lehetővé teszi a for-ciklusok használatát. Ez a Sass-ban nagyon egyszerűen működik, és például saját rácshálórendszer definiálására is használható.

Modern CSS Sass - 12 Each és While ciklus

Modern CSS Sass-szel - 12 darab each és while loopja.

A Sassban a For- mellett Each- és While-ciklusok is használhatók. Hogyan lehet ezt felhasználni automatizálásra, azt mutatja ez a videó.

Modern CSS SASS - 13 döntés if és else felhasználásával.

Modern CSS SASS - 13 döntés if és else segítségével

Az ilyen nyelvek között, mint PHP és JavaScript, lehetőség van különböző eseményekre if és else segítségével reagálni. Valójában ez Sass-ban is lehetséges. Hogyan lehet ezt használni, arról szól ez a videó.

Modern CSS Sass-hal - 14 matematikai operátor

Modern CSS Sass - 14 Matematikai Operátor

Sass-ban számolhattok. Például betűméretek meghatározásakor hasznos. A megfelelő operátoroknak köszönhetően azonban saját egyedi rácshálórendszert is készíthetünk.

Modern CSS SASS-szal - 15 színjáték

Természetesen definiálhatók színek a Sass-ban. Azonban a Sass ennél sokkal tovább megy ezen a területen, mint a hagyományos CSS. Az megfelelő függvények segítségével például könnyedén manipulálhatók a színek.

Modern CSS Sass segítségével - 16 κ Compass

Modern CSS Sass segítségével - 16 Compass

A Compass Framework további lehetőségeket kínál a Sass számára sokszorosan. Ez az első videó megmutatja, hogyan telepíthetitek és használhatjátok a Compass-t.

Modern CSS Sass-szal - 17 Compass és CSS3

A Compass projekt weboldala a legfontosabb információs forrása, amikor a keretrendszer használatáról van szó. Megmutatom nektek a Compass CSS3 funkcióit azáltal, hogy hogyan tudtok dolgozni a dokumentációval.

Modern CSS Sass-szel - 18 Compass a Bullet-akcióban és egy pillantás a Susyra.

Modern CSS Sass – 18 Compass in Bullet-Aktion és egy pillantás Susy-ra

Egy példa mutatja, hogy milyen egyszerűen lehet megvalósítani dolgokat Compass-szal. Ennek a sor végén továbbá megvizsgáljuk egy alternatív Sass keretrendszerét. A Susy egy karcsú rácshálózati rendszert kínál.

Tartalmi részletek

Az CSS hatékony – Sass-szal: indítsd el a gyakorlati bemutatót
Sass forradalmasította az CSS fejlesztést, mert végre lehet hatékonyan írni a CSS kódot. 18 leckéből álló 3 órás intenzív tanfolyam során mindent megtudhatsz a Sass-ról és a Sass keretrendszerről, a Compass-ról.

A Sass fejlesztőkörnyezet telepítése

Mielőtt a CSS-bemutatóra elindulnál, érdemes az telepítésre összpontosítani. De ne aggódj – ez egyszerű. Elég néhány Ruby és parancs a parancssorban, és máris büszke tulajdonosa leszel egy Sass fejlesztőkörnyezetnek. Aki eddig visszariadt a Sass telepítésétől, az most lépésről lépésre végigvezetést kap a telepítés folyamatában. Az első teszt aztán megmutatja, melyik Sass verzió van telepítve.

Első lépések egy tipikus projektstruktúrával

Ezt követően itt vannak már az első lépések: A Sass felé vess egy első pillantást! Az szintaxis bepillantása után megismerheted a alapvető nyelvi sajátosságokat. Megismered a változókat, láthatsz egy tipikus projektstruktúrát, és hamar ki fogsz igazodni a Sass-ban.

Fejlesztés: Ciklusok és if-utasítások

Ezekkel a felkészültségekkel ezután jön a professzionális fejlesztés: Amit a Sass különlegessé tesz, azok a dolgok, amelyek már majdnem olyanok, mint a JavaScript valódi szkriptnyelvei. Mert a Sass-ban is lehet ciklusokat definiálni és if utasításokat használni. Ezek azok a dolgok, amelyek alapvetőek a Mixinek Sass legmagasabb szintű funkcióinak meghatározásához. Ezek erőteljes funkciók, amik megkönnyítik a munkát a Sass-szal, végül is a CSS használatát jelentősen megkönnyítik.

Compass: Egyszerűsíti a CSS-munkát

Ez a tréning koronázásaként Compass szolgál. Ez még egy teljesen más szintre emeli a Sass fejlesztést, mivel ez a Sass keretrendszer számos eszközt és funkciót kínál, amelyek további jelentősen megkönnyítik a CSS-munkát.

Ezeket fogod megtanulni az CSS- és Sass-bemutatóban

Lépésről lépésre megismerheted a Sass funkcióit, az alapoktól a profi eszközökön át a Compass-szal való munkáig. Tehát megtanulhatod, milyen lehetőségek vannak jelenleg, és azonnal alkalmazhatod a tudásodat. A CSS írás még soha nem volt ilyen hatékony!