Obsah
- Vrátane rámcov
- Použite iba jeden reset
- Výstupný formát
- Podpora prehľadávača
- Predĺžiť
- Poznámka k hniezdeniu
- Záver
Tento článok sa prvýkrát objavil v čísle 233 časopisu .net - najpredávanejšieho časopisu na svete pre webových dizajnérov a vývojárov.
Aj keď je prostredie na tvorbu obsahu určite priaznivejšie, ak sa používajú programy Sass a Compass oproti štandardným CSS, spoločnou obavou je, že výsledný kód bude viac nafúknutý, ako keby bol napísaný „ručne“. To by mohlo viesť k vytvoreniu CSS, ktoré je ťažšie zvládnuť s prvkami napísanými a niekoľkokrát prepísanými, ale aj ku kódu, ktorý má väčšiu stopu, ako je potrebné. Tu využijeme funkcie Sass a Compass, ktoré dokážu orezať nadmerný kód a prípadne dokonca vygenerovať CSS, ktoré sú efektívnejšie, ako keby ste si ich napísali sami.
Vrátane rámcov
Pri spustení projektu v programoch Sass a Compass má mnoho používateľov svoju vlastnú „základnú“ šablónu. Môže to byť ručne vyrobená sada čiastkových súborov alebo kompasová verzia štandardného HTML5 alebo Foundation Framework. Jednou výhodou použitia verzií týchto rámcov Sass a Compass je, že sú modulárne, takže je ľahké vypnúť nepotrebné prvky. Ak teda ako východiskový bod použijete základný štítok HTML5, ak nie je potrebná podpora zoznamov, vložení alebo akýchkoľvek iných modulov, komentujte ich alebo úplne odstráňte. Napríklad:
@include h5bp-display; @include h5bp-selection; @include h5bp-base; @include h5bp-links; @include h5bp-typography; // @ include h5bp-lists; // @ include h5bp-embeds; // @ include h5bp-numbers; @include h5bp-forms; // @ include h5bp-tables; // @ include h5bp-helpers;
Použite iba jeden reset
Je to podobný príbeh pre resetovanie. Ak sa začína rámcom, zvyčajne je zahrnutý reset, alebo môže byť na tento účel použitý Normalizer (tu je dobrá verzia Sass). Či tak alebo onak, ak už nejaký reset existuje, nemá zmysel, vrátane vlastného resetovania Compassu, ktorý je štandardne zahrnutý pri vytváraní projektu z príkazového riadku:
kompas vytvoriť názov projektu>
Vyhľadajte nasledujúci riadok a pokiaľ to nie je potrebné, komentujte ho:
Výstupný formát
Sass a Compass poskytujú schopnosť kompilovať CSS rôznymi spôsobmi (rozšírené, skomprimované atď.). Nastavenia sú definované v config.rb súbor v koreňovom adresári projektu. Keď ste pripravení presunúť kód do výroby, vyhľadajte nasledujúce riadky:
output_style =: rozšírené
Ak chcete vytvoriť čo najmenší súbor CSS, zmeňte ho na:
output_style =: komprimované
Pri výrobe CSS pre výrobu je nevyhnutné zmeniť nastavenie na „komprimované“. Komprimáciou CSS a nastavením servera na jeho odoslanie vo formáte gzip (služba Google Page Speed vás upozorní, ak váš server neodošle vo formáte CSS vo formáte gzip), môže to ponúknuť obrovskú ekonomiku. Člen kmeňového tímu Sass Chris Eppstein radí, že „najmä CSS sa vďaka všetkej redundancii a výrečnosti jazyka mimoriadne dobre komprimuje. Môže sa stať 30% až 10% pôvodnej veľkosti “.
Ak vyvíjate web pomocou jedného nastavenia (napríklad „vnorené“ alebo „rozbalené“), môžete vynútiť zmenu jednorazovo z príkazového riadku (napríklad ak ste vyvíjali pomocou rozbaleného nastavenia, ale chceli ste skontrolovať veľkosť komprimovaného súboru exportovaného CSS). Ak chcete vynútiť iné nastavenie exportu, spustite tento príkaz:
kompas kompilovať - komprimovaný v štýle výstupu - sila
Prípadne, ak produkujete súbor CSS s programami Sass a Compass, ktorý odovzdáte niekomu inému, s ktorým môžete pracovať, môžete si ponechať komentáre CSS, ale odstrániť komentáre Sass a komentáre ladiace číslo riadku v rozšírenom nastavení zmenou nasledujúcej hodnoty v config.rb:
line_comments = true
Zmeňte hodnotu na:
line_comments = false
Na záver stojí za to vedieť, že môžete pridať „hlasný“ komentár. Tieto komentáre sa nikdy neodstránia bez ohľadu na výstupný režim. Urobíte to tak, že ako prvý znak komentára CSS pridáte výkričník:
/ *! Toto sa neodstráni. Užitočné pre oznámenia o autorských právach a podobné * /
Podpora prehľadávača
Jedným z príkladov použitia Sassu je použitie „autorského rámca“ Compassu, aby sa pri vypracúvaní rôznych syntaxí CSS3 trochu pracovalo (gradienty môžu byť skutočnou záťažou). Ale predvolene má Compass podporu pre veľký počet prehľadávačov. V prípade, že konkrétna predpona dodávateľa nie je potrebná (napríklad interný projekt), môže byť odstránená. Je to však mikro optimalizácia, ktorá sa preto neodporúča pre verejné webové stránky.
Tu sú niektoré z predvolených nastavení:
$ experimentálna podpora pre mozillu: true! predvolené; $ experimentálna podpora pre webkit: true! predvolené; $ podpora originálneho webkitu: true! predvolené; $ experimentálna podpora pre operu: true! default; $ experimentálna podpora pre Microsoft: true! default;
Podporu môžete vypnúť pridaním tejto premennej:
$ experimentálna podpora pre operu: false;
Pred vyvolaním modulu Compass CSS3 je lepšie zahrnúť premennú:
$ experimentálna podpora pre operu: false; @ import "kompas / css3";
Upozorňujeme, že medzi zrejmejšími premennými je jedna, ktorá je predvolene zahrnutá pre pôvodnú syntax gradientu WebKit - potrebujete ju? Skvelé, ak tak urobíte, ale ak nie, je to vynikajúci kandidát na odstránenie: kód prechodu je často dosť podrobný. Podobne existujú aj premenné pre staršiu podporu IE. Ak vám nejde o podporu hackingu IE6 alebo 7, zahrňte túto premennú rovnakým spôsobom ako predtým:
$ legacy-support-for-ie: false;
Úplný zoznam podpory, ktorú je možné týmto spôsobom prepínať, obsahuje praktická stránka na webe Compass.
Predĺžiť
Ak ste Sass používali dlhšiu dobu, budete s tým oboznámení @ predĺžiť smernice. Umožňuje jednému pravidlu dediť štýly druhého. Napríklad najskôr vytvoríme niekoľko farebných premenných:
// Farebné premenné $ grey: #bfbfbf; $ dark: # 999; $ red: # ff0b13;
Teraz pridajme naše prvé pravidlo, štandardné pole, ktoré môžeme použiť na celom webe:
// Box.box {padding: 2em; farba pozadia: zosvetliť ($ šedá, 20%); farba: $ dark;}
Tu sme práve pridali nejaké vypchávky, ktoré sa používajú farba funkcie Sass vytvoriť farbu pozadia o 20 percent svetlejšiu ako $ sivá premennej a potom nastavte farbu na $ tmavé premenná. Tu je to, čo sa kompiluje:
.box {polstrovanie: 2em; farba pozadia: # f2f2f2; farba: # 999999;}
Ak by sme písali štandardné CSS a chceli by sme toto políčko použiť ako základ iného poľa pre iný štýl, mohli by sme toto pravidlo skopírovať a vložiť nižšie, premenovať a pridať akékoľvek ďalšie deklarácie. Napríklad:
.warningBox {padding: 2em; farba pozadia: # f2f2f2; farba: # 999999; orámovanie: 2px bodkované # ff0b13;}
Nie je to najlepší spôsob, ako to urobiť. Je efektívnejšie definovať iba akékoľvek ďalšie vyhlásenia, ktoré sa líšia od prvého. Ale koľkí z nás si toto mohli previniť, keď v zhone napísali štandardné CSS? V tomto prípade iba hranica pár vlastností a hodnôt sa líši od .box pravidlo. Našťastie, ak používate Sass a využívate @ predĺžiť smernice to pre vás urobí ťažké zdvíhanie, napríklad pridaním nasledujúceho textu pod naše existujúce .box štýl v súbore Sass ...
// Warning Box.warningBox {@extend .box; orámovanie: 2 pixely bodkované $ red;}
… Bude mať za následok nasledujúci skompilovaný kód:
.box, .warningBox {odsadenie: 2em; farba pozadia: # f2f2f2; color: # 999999;}. warningBox {border: 2px dotted # ff0b13;}
Sass skombinuje štýly, kde je to vhodné, a vygeneruje najefektívnejší kód. Aj keď sme vždy schopní spôsobiť chybu „medzi klávesnicou a stoličkou“, Sass nie je. To si vyžaduje, aby existovalo predtým existujúce pravidlo, o ktoré sa môžeme oprieť. Ale zástupný znak v Sass 3.2 posúva túto abstrakciu o úroveň vyššie.
Selektory zástupných znakov v programe Sass 3.2 umožňujú vytváranie tried, ktoré sa používajú iba na rozšírenie. Ak nie sú predĺžené pomocou @ predĺžiť smernice v zásade nevytvárajú žiadny výstup. Napríklad možno v našom predchádzajúcom príklade potrebujeme niekoľko tried pre rôzne polia (varovná schránka, schránka úspechu, informačná schránka), ktoré sú založené na rovnakých štýloch s jemnými variáciami. Pomocou zástupného symbolu nie je potrebné vytvárať štýl pre štýl „základného“ poľa, ak sa nikdy nebude používať. Namiesto obvyklej bodky namiesto toho vytvorte triedu s% na začiatku:
// Box% box {padding: 2em; farba pozadia: zosvetliť ($ šedá, 20%); color: $ dark;} // Warning Box.warning-box {@extend% box; orámovanie: 2px bodkované $ red;} // Varovné pole.úspešné-pole {@extend% pole; orámovanie: 2px bodkované $ green;} // Informačné okno.info-pole {@extend% políčko; orámovanie: 2 body bodkované $ modré;}
To by malo za následok kompiláciu nasledujúcich CSS:
.warning-box, .success-box, .info-box {padding: 2em; farba pozadia: # f2f2f2; color: # 999999;}. warning-box {border: 2px dotted # ff0b13;}. success-box {border: 2px dotted # 11c909;}. info-box {border: 2px dotted # 091fff;}
Štýly zástupných symbolov zvyšujú pohodlie a úroveň abstrakcie ťažšie dosiahnuteľnú iba pomocou CSS. V kombinácii s premennými poskytujú útržky kódu, ktoré je možné použiť v rámci rôznych projektov a vytvoriť spoločné vzory rozhraní s minimálnym úsilím.
Poznámka k hniezdeniu
Sass poskytuje možnosť vnoriť pravidlá, ale nadmerné vnorenie môže znamenať nafúknutý kód. Eppstein poznamenáva: „Toto je anti-vzor a je potrebné sa mu vyhnúť. Komentáre vytvárajú lepší mechanizmus zoskupovania. Používateľ by sa mal opýtať: Robí to li musia byť vnorené do ul selektor? Existujú aj iné li prvky, ktoré by mohli existovať mimo tohto ul?”
Môže to byť obzvlášť problematické pri rozširovaní existujúcich pravidiel. Napríklad:
// hrozné nadmerné vnorenie example.container .link-wrapper ul li a.link {color: $ red;} päta ul li a.footerLink {@extend a.link;}
... by sa v CSS skompiloval takto:
.kontajner .link-wrapper ul li a.link, .container .link-wrapper pätička ul li a.footerLink, päta .kontainer .link-wrapper ul li a.footerLink {color: # ff0b13;}
Záver
Používanie predprocesora na generovanie šablón štýlov nemusí mať za následok nafúknutý kód. Všímaním si jemnejších detailov a funkcií Sass a Compass, ako sú napríklad štýly zástupných znakov, môžu výstupné súbory fungovať lepšie, s menšími stopami. A tí, ktorí s nimi budú v budúcnosti pracovať, by ich mali nájsť SUCHÉ, takže sa im s nimi ľahšie pracuje.
Ďakujem Chrisovi Eppsteinovi za jeho peer review tohto tutoriálu
Objavte 30 inšpiratívnych príkladov CSS na našom sesterskom webe Creative Bloq.
