Egy egyszerű és egyszerű útmutató a Sass megértéséhez
Egy idővel Thoriq Firdaus írt egy nagy cikket a Sass használatával kapcsolatban, amely megmutatta, hogyan kell telepíteni és használni ezt a rendkívül hasznos CSS előfeldolgozó nyelvet (érdemes lehet megnézni, tudod, hogy elinduljon).
Ebben a cikkben azt hittem, hogy egy kicsit jobban megismerhetem, mit tehetünk a Sass-al, és hogyan fejlesztik ki a fejlesztők minden nap a jobb és modulárisabb CSS-kód létrehozásához. Ugrás előre a kívánt részre:
- kereskedelmi eszközök
- változók
- fészekrakó
- Szabályok kiterjesztése
- mixinek
- Helyőrző választók
- Művelet
- Funkciók
Kereskedelmi eszközök
Thoriq megmutatta, hogyan használhatja a Sass-ot a parancssorból a sass --óra parancs.
Ha inkább a GUI-eszközöket szeretné használni, akkor a saját kedvenc alkalmazásom, a Codekit, a Sass összeállításának webes fejlesztői eszköze, a tömörítés, az autoprefixálás és még sok más. A Prepros egy másik nagyon alkalmas alkalmazás, amely minden rendszerben használható. Mindkettő fizetett alkalmazások de megéri, ha hosszú távon használja őket.
Ha csak meg akarod próbálni Sass-t anélkül, hogy bármit fizetnének használhatja a terminált, vagy a Koala-t (itt a felülvizsgálatunkat), egy ingyenes, több platformot tartalmazó, gazdag alkalmazást, amely a prémium partnerekkel szemben támaszkodhat.
változók
Az egyik első dolog, amire szükséged lesz a fejed körbevételéhez, változók. Ha PHP-ből vagy más hasonló kódolási nyelvből származik, akkor ez lesz a második természeted. A változók a következők újrafelhasználható információk bitjeinek és darabjainak tárolása, például egy színérték:
$ Prime_color: # 666666; .gomb szín: $ primer_color; . fontos color: $ pirmin_color;
Ez talán nem tűnik hasznosnak, de képzelje el, hogy 3000 kódsor van. Ha a színséma megváltozik, akkor minden színértéket ki kell cserélni a CSS-ben. Sass segítségével igazságos módosítsa az értéket a $ primary_color változó, és ezzel együtt.
Változókat használnak betűtípusok, méretek, színek és számos egyéb információ tárolása. Nagyobb projektek esetében érdemes lehet minden változót külön fájlba kinyerni (megnézzük, hogy mi történik ez hamarosan). Ez lehetővé teszi, hogy az egész projektet újra színezze, és módosítsa a betűtípusokat és egyéb kulcsfontosságú szempontokat anélkül, hogy megérintené a tényleges CSS szabályokat. Mindössze annyit kell tennie, hogy módosítson néhány változót.
fészekrakó
Egy másik alapfunkció, amit Sass ad neked a szabályok beillesztésének képessége. Tegyük fel, hogy navigációs menüt építesz. Neked van nav elem, amely nem rendezett listát, listaelemeket és hivatkozásokat tartalmaz. A CSS-ben ilyesmit tehet:
#header nav / * A navigációs terület szabályai * / #header nav ul / * A menü szabályai * / #header nav li / * A listaelemek szabályai * / #header nav a / * Szabályok linkekhez * /
A szelektorokban sokszor ismételjük magunkat. Ha az elemek közös gyökerei vannak, a fészkelést használhatjuk írja le a szabályokat sokkal tisztább módon.
Íme, hogy a fenti kód megnézhesse Sass-ban:
#header nav / * A navigációs terület szabályai * / ul / * A menü * / li / * szabályai A listaelemek szabályai * / a / * A linkek szabályai * /
A fészkelés rendkívül hasznos, mert a stíluslapokat (sokat) olvashatóbbá teszi. A fészkelést a megfelelő bemélyedéssel együtt lehet elérni jól olvasható kódszerkezetek, akkor is, ha a kódja megegyezik.
A fészkelés egyik hátránya, hogy képes szükségtelen jellegű. A fenti példában hivatkozásra kerültem #header nav a. Ön is használhatja #header nav ul li a ami valószínűleg túl sok lenne.
Sass-ban sokkal könnyebb, hogy nagyon specifikus legyen, mivel mindössze annyit kell tennie, hogy fészkelje a szabályokat. Az alábbiakban sokkal kevésbé olvasható és elég specifikus.
#header nav / * A navigációs terület szabályai * / ul / * A menü szabályai * / li / * A listaelemek szabályai * / a / * A linkek szabályai * /
Szabályok kiterjesztése
A kiterjesztés ismerős lesz, ha objektum-orientált nyelvekkel dolgozik. A legjobban egy példán keresztül érthető, hozzunk létre 3 gombot, amelyek enyhe eltérések egymástól.
.gomb kijelző: inline-block; szín: # 000; háttér: # 333; border-radius: 4px; párnázás: 8px 11px; .gomb-elsődleges @extend. gomb; háttér: # 0091C2 .gomb-kicsi @extend. gomb; font-size: 0.9em; párnázás: 3px 8px;
A .button-primer és .button-kicsi osztályok minden kiterjesztik a .gomb osztály, ami azt jelenti, hogy minden tulajdonságát átveszik, majd meghatározzák a sajátjukat.
Ez rendkívül hasznos sok esetben, amikor egy elem variációi használhatók. Az üzenetek (riasztás / siker / hiba), gombok (színek, méretek), menütípusok stb..
Az egyik kiterjesztés az, hogy a média lekérdezésekben nem fognak működni ahogy elvárnád. Ez egy kicsit fejlettebb, de mindent megtudhatsz erről a viselkedésről a Placeholder Selectors - A helyőrző kiválasztók speciális kiterjesztése, amiről hamarosan beszélünk.
mixinek
A Mixins egy másik kedvenc funkciója az előfeldolgozó felhasználóknak. A Mixins újrafelhasználható szabályok, amelyek tökéletesen megfelelnek a szállítóspecifikus szabályoknak vagy a hosszú CSS szabályoknak.
Hogyan lehet létrehozni egy átmeneti szabályt a lebegő elemek számára:
@mixing hover-effect -webkit-átmenet: háttérszín 200ms; -moz-átmenet: háttérszín 200ms; -o-átmenet: háttérszín 200ms; átmenet: háttérszín 200ms; a @include hover-effect; .gomb @befejezi a lebegőhatást;
A Mixins lehetővé teszi a változók használatát is határozza meg a mixin értékeit. A fenti példát át lehetett írni irányítsuk át az átmenet pontos idejét. Előfordulhat, hogy a gombok például egy kicsit lassabbá válnak.
@mixin hover-effect ($ speed) -webkit-átmenet: háttérszín $ sebesség; -moz-átmenet: háttérszín $ sebesség; -o-átmenet: háttérszín $ sebesség; átmenet: háttérszín $ sebesség; a @include hover-effect (200ms); . gomb @incover-hover-effect (300ms);
Helyőrző választók
A helyőrző-választókat Sass 3.2-vel mutatták be, és megoldott egy olyan problémát, amely egy kicsit felrobbanthatott a generált CSS-kódban. Tekintse meg ezt a kódot, amely hibaüzeneteket hoz létre:
.üzenet font-size: 1.1em; padding: 11px; határ-szélesség: 1px; border-style: szilárd; .message-veszély @extend .message; háttér: # C20030; szín: #fff; szegélyszín: # A8002A; .message-success @extend .message; háttér: # 7EA800; szín: #fff; szegélyszín: # 6B8F00;
A legvalószínűbb, hogy az üzenetosztályt soha nem fogjuk használni a HTML-ben: ez volt létre kell hozni, nem kell használni. Ez egy kicsit felpuhul a generált CSS-ben. A kód hatékonyabbá tétele érdekében használhatja a helyőrző választót, amely százalékjelet jelez:
% message font-size: 1.1em; padding: 11px; határ-szélesség: 1px; border-style: szilárd; .message-veszély @extend% gomb; háttér: # C20030; szín: #fff; szegélyszín: # A8002A; .message-siker @extend% gomb; háttér: # 7EA800; szín: #fff; szegélyszín: # 6D9700;
Ebben a szakaszban lehet, hogy vajon mi a különbség a kiterjesztések és a keverékek között. Ha helyőrzőket használ, mint egy paraméter nélküli mixin. Ez igaz, de a CSS kimenete eltér. A különbség az mixins ismétlődik a szabályok míg a helyőrzők meggyőződnek arról, hogy ugyanazok a szabályok osztoznak a választók között, ezáltal kevesebb CSS-t eredményez.
Művelet
Nehéz itt ellenállni a börtönnek, de most nem fogok semmilyen orvosi viccet. Az operátorok lehetővé teszik, hogy néhány matematikát elvégezzen a CSS kódjában, és nagyon hasznos lehet. A Sass útmutatóban található példa tökéletes ennek bemutatására:
.tartály szélesség: 100%; cikk float: balra; szélesség: 600px / 960px * 100%; aside float: right; szélesség: 300px / 960px * 100%;
A fenti példa 960px alapú rácsrendszert hoz létre minimális problémával. A következő CSS-nek szépen lefordul:
.tartály szélesség: 100%; cikk float: balra; szélesség: 62,5%; aside float: right; szélesség: 31,25%;
A műveletek számára egy nagyszerű használat, hogy a színeket ténylegesen összekeverjük. Ha megnézzük a Sass fenti sikereit, nem világos, hogy a háttér és a határ színe valamiféle kapcsolatban van. A szürke árnyalatának kivonásával sötétíthetjük a színt, így a kapcsolat láthatóvá válik:
$ primer: # 7EA800; .message-success @extend% gomb; háttér: $ primer; szín: #fff; határszín: $ primer - # 111;
A világosabb a kivont szín, annál sötétebb lesz az árnyék. A világosabb a hozzáadott szín, annál könnyebb az árnyék.
Funkciók
Számos funkció használható: számfunkciók, karakterláncfunkciók, listafunkciók, színes funkciók és így tovább. Tekintse meg a fejlesztői dokumentáció hosszú listáját. Egy pillantást vetek egy párra, hogy megmutassam, hogyan működnek.
A könnyítsen és elsötétít funkció segítségével módosíthatja a szín könnyedségét. Ez jobb, mint az árnyalatok kivonása, ez mindent modulárisabbá és nyilvánvalóbbá teszi. Nézze meg az előző példát a sötétítő funkció használatával.
$ primer: # 7EA800; .message-success @extend% gomb; háttér: $ primer; szín: #fff; szegélyszín: sötétebb ($ primer, 5);
A függvény második argumentuma a szükséges sötétség százalékos aránya. Minden funkció paraméterekkel rendelkezik; nézd meg a dokumentációt, hogy lássuk, mit jelentenek! Íme néhány más magyarázó színfunkció: deszaturálni, telít, invert, szürkeárnyalatos.
A mennyezetet épít vmire funkció, mint a PHP-ben, a következő egész számra kerekített számot ad vissza. Ez használható az oszlopszélesség kiszámításához, vagy ha nem szeretné, hogy a végső CSS-ben sok tizedesjegyet használjon.
.title font-size: ceil ($ title_size * 1.3314);
Áttekintés
A Sass jellemzői nagyszerű erővel rendelkeznek ahhoz, hogy kevesebb erőfeszítéssel írjunk jobb CSS-t. A mixinek, kiterjesztések, funkciók és változók megfelelő használata a stíluslapjaink karbantarthatóságát, olvashatóságát és könnyebben írhatóvá teszi..
Ha érdekel egy másik hasonló CSS előfeldolgozó, azt javaslom, hogy nézd meg a LESS-et (vagy nézd meg a kezdő útmutatónkat) - az alapul szolgáló tőke lényegében azonos!
