Jednoduchý a snadný průvodce pochopit Sass
Před chvílí napsal Thoriq Firdaus skvělý článek o tom, jak začít s programem Sass, který vám ukázal, jak nainstalovat a používat tento vysoce užitečný jazyk CSS preprocesoru (možná budete chtít, abyste to začali, víte, abyste mohli začít).
V tomto článku jsem si myslel, že bych vám dal trochu vhled do toho, co můžete dělat se Sass a jak jej vývojáři používají každý den k vytvoření lepšího a modulárnějšího CSS kódu. Přeskočit na požadovanou sekci:
- Nástroje pro obchod
- Proměnné
- Hnízdění
- Rozšíření sady pravidel
- Směsi
- Voliče zástupného symbolu
- Operace
- Funkce
Nástroje pro obchod
Thoriq vám ukázal, jak můžete použít Sass z příkazového řádku pomocí sass --watch příkaz.
Pokud dáváte přednost nástrojům GUI, můžete jít s mou osobní oblíbenou aplikací, Codekitem, webovým vývojářským nástrojem pro kompilaci Sass, zřetězení, autoprefixování a mnoho dalšího. Prepros je další velmi schopná aplikace, kterou lze použít na všech systémech. Oba jsou placené žádosti ale stojí za to, pokud budete používat je v dlouhodobém horizontu.
Pokud chcete vyzkoušet Sass bez placení za cokoliv můžete použít terminál, nebo Koala (zde je naše hodnocení), bezplatnou cross-platformní bohatou aplikaci, která může držet své místo proti prémiové protějšky.
Proměnné
Jednou z prvních věcí, které budete muset zabalit do hlavy, jsou proměnné. Pokud pocházíte z pozadí PHP nebo jiného podobného kódovacího jazyka, bude to pro vás druhá povaha. Proměnné jsou pro ukládání bitů a kusů opakovaně použitelných informací, jako například hodnota barvy:
$ Primary_color: # 666666; .button color: $ Primary_color; .important color: $ Primary_color;
To se nemusí zdát užitečné, ale představte si, že máte 3000 řádků kódu. Pokud se vaše barevné schéma změní, budete muset nahradit každou hodnotu barev v CSS. Sassem můžete prostě změnit hodnotu z $ Primary_color s ním.
Proměnné se používají pro ukládání názvů písem, velikostí, barev a řady dalších informací. V případě větších projektů můžeme vyplatit všechny vaše proměnné do samostatného souboru (podíváme se na to, jak se to brzy provede). To vám umožní udělat si celý projekt a změnit písma a další klíčové aspekty bez toho, aby se dotýkaly skutečných pravidel CSS. Vše, co musíte udělat, je změnit některé proměnné.
Hnízdění
Další základní funkcí, kterou Sass nabízí, je schopnost vnořit pravidla. Předpokládejme, že vytváříte navigační menu. Máte nav prvek, který obsahuje neuspořádaný seznam, položky seznamu a odkazy. V CSS můžete udělat něco takového:
#header nav / * Pravidla pro oblast nav * / #header nav ul / * Pravidla pro menu * / #header nav li / * Pravidla pro položky seznamu * / #header nav a / * Pravidla pro odkazy * /
V selektorech se hodně opakujeme. Pokud prvky mají společné kořeny, můžeme použít vnoření psát naše pravidla mnohem čistěji.
Zde je popsáno, jak by se výše uvedený kód mohl v aplikaci Sass zobrazit:
#header nav / * Pravidla pro oblast nav * / ul / * Pravidla pro menu * / li / * Pravidla pro položky seznamu * / a / * Pravidla pro odkazy * /
Hnízdění je velmi užitečné, protože to usnadňuje čitelnost stylů (hodně). Pomocí vnoření spolu s řádným odsazením můžete dosáhnout vysoce čitelné kódové struktury, i když máte dostatek kódu.
Jednou z nevýhod hnízdění je, že může vést ke zbytečné specifičnosti. Ve výše uvedeném příkladu jsem odkazoval na odkazy #header nav a. Můžete také použít #header nav ul li a pravděpodobně příliš mnoho.
V Sassu je mnohem snazší být velmi specifický, protože vše, co musíte udělat, je vnořit svá pravidla. Toto je mnohem méně čitelné a zcela specifické.
#header nav / * Pravidla pro oblast nav * / ul / * Pravidla pro menu * / li / * Pravidla pro položky seznamu * / a / * Pravidla pro odkazy * /
Rozšíření sady pravidel
Rozšíření bude známé, pokud pracujete s objektově orientovanými jazyky. To je nejlépe pochopeno prostřednictvím příkladu, vytvořme 3 tlačítka, které jsou navzájem nepatrné.
.tlačítko zobrazení: inline-block; barva: # 000; pozadí: # 333; hraniční rádius: 4px; polstrování: 8px 11px; .button-primární @extend .button; pozadí: # 0091C2 .button-small @extend .button; velikost písma: 0,9; polstrování: 3px 8px;
.tlačítko-primární a .tlačítko-malé všechny třídy rozšiřují .tlačítko třídy, což znamená, že na sebe berou všechny své vlastnosti a pak definují své vlastní.
To je nesmírně užitečné v mnoha situacích, kde lze použít variace prvku. Zprávy (výstraha / úspěch / chyba), tlačítka (barvy, velikosti), typy menu atd. Mohou všechny využívat rozšiřující funkce pro skvělou efektivitu CSS.
Jedna námitka rozšiřuje to nebudou pracovat v mediálních dotazech jak byste čekali. Toto je o něco pokročilejší postup, ale o tomto chování se můžete dočíst v části Porozumění zástupným voličům - výběr zástupných symbolů je zvláštním druhem rozšíření, o kterém budeme brzy mluvit.
Směsi
Mixins jsou další oblíbenou vlastností uživatelů předprocesoru. Mixiny jsou opakovaně použitelné sady pravidel - ideální pro pravidla specifická pro dodavatele nebo pro zkrácení dlouhých pravidel CSS.
Jak vytvořit pravidlo přechodu pro prvky přechodu:
@mixing hover-effect -webkit-transition: barva pozadí 200ms; -moz-přechod: barva pozadí 200ms; -o-přechod: barva pozadí 200ms; přechod: barva pozadí 200ms; a @include hover-effect; .button @include efekt přechodu;
Mixiny také umožňují používat proměnné definovat hodnoty v mixinu. Můžeme přepsat výše uvedený příklad dejte nám kontrolu nad přesným časem přechodu. Můžeme chtít, aby tlačítka přecházely například trochu pomaleji.
@mixin hover-effect ($ speed) -webkit-transition: background-color $ speed; -moz-transition: background-color $ speed; -o-transition: background-color $ speed; přechod: barva pozadí $ speed; a @include hover-effect (200ms); .button @include hover-effect (300ms);
Voliče zástupného symbolu
Voliče zástupných symbolů byly představeny s programem Sass 3.2 a vyřešily problém, který by mohl způsobit trochu bloat v generovaném kódu CSS. Podívejte se na tento kód, který vytváří chybové zprávy:
.message font-size: 1.1em; polstrování: 11px; border-width: 1px; hraniční styl: pevná; .message-danger @extend .message; pozadí: # C20030; barva: #ff; border-color: # A8002A; .message-success @extend .message; pozadí: # 7EA800; barva: #ff; border-color: # 6B8F00;
Je velmi pravděpodobné, že třída zpráv nebude nikdy použita v našem HTML: byla vytvořen tak, aby byl rozšířen, nepoužíván jako je. To způsobí trochu bloat v generované CSS. Pro zefektivnění kódu můžete použít volič zástupných symbolů, který je označen znakem procenta:
% message font-size: 1.1em; polstrování: 11px; border-width: 1px; hraniční styl: pevná; .message-danger @extend% tlačítko; pozadí: # C20030; barva: #ff; border-color: # A8002A; .message-success @extend% tlačítko; pozadí: # 7EA800; barva: #ff; hraniční barva: # 6D9700;
V této fázi se můžete divit, jaký je rozdíl mezi prodloužením a mixiny. Používáte-li zástupné symboly, chovají se jako mix bez parametrů. To je pravda, ale výstup v CSS se liší. Rozdíl je v tom mixins duplicitní pravidla zatímco zástupné symboly zajistí, že stejná pravidla budou sdílet selektory, výsledkem je méně CSS.
Operace
Je těžké odolat této slovní hříčce, ale teď se zdržím všech lékařských vtipů. Operátoři vám umožní udělat nějakou matematiku ve vašem CSS kódu a může být sakra užitečná. Příklad v průvodci Sass je ideální pro představení tohoto:
.container width: 100%; article float: vlevo; šířka: 600px / 960px * 100%; aside float: right; šířka: 300px / 960px * 100%;
Výše uvedený příklad vytváří síťový systém na bázi 960px s minimálními problémy. Komplikuje se pěkně na následující CSS:
.container width: 100%; article float: vlevo; šířka: 62,5%; aside float: right; šířka: 31,25%;
Jedno velké použití, které najdu pro operace, je vlastně mix barev. Pokud se podíváte na úspěšnou zprávu Sass výše, není jasné, že barva pozadí a hranice mají nějaký vztah. Odečtením šedého odstínu můžeme ztmavit barvu, čímž je viditelný vztah:
$ primární: # 7EA800; .message-success @extend% button; pozadí: $ primární; barva: #ff; border-color: $ Primary - # 111;
Čím světlejší je odečtená barva, tím tmavší bude výsledný odstín. Světlejší přidaná barva, světlejší výsledný odstín.
Funkce
K dispozici je velké množství funkcí: Číselné funkce, funkce řetězce, funkce seznamu, funkce barev a další. Podívejte se na dlouhý seznam v dokumentaci pro vývojáře. Podívám se na pár tady, abych vám ukázal, jak fungují.
zesvětlit a tmavnout funkce může být použita ke změně světlosti barvy. To je lepší než odečítání odstínů, to dělá vše ještě více modulární a zřejmé. Podívejte se na náš předchozí příklad pomocí funkce tmavnutí.
$ primární: # 7EA800; .message-success @extend% button; pozadí: $ primární; barva: #ff; border-color: darken ($ primární, 5);
Druhým argumentem funkce je procento zatemnění. Všechny funkce mají parametry; podívejte se na dokumentaci, abyste viděli, co jsou! Zde je několik dalších vysvětlujících barevných funkcí: desaturát, saturovat, invertovat, ve stupních šedi.
ceil funkce, stejně jako v PHP, vrací číslo zaokrouhlené na další celé číslo. To lze použít při výpočtu šířek sloupců nebo v případě, že v konečném CSS nechcete používat mnoho desetinných míst.
.title font-size: ceil ($ záhlaví_size * 1.3314);
Přehled
Funkce v Sassu nám dávají velkou moc psát lepší CSS s menším úsilím. Správné používání mixinů, rozšiřování, funkcí a proměnných způsobí, že naše styly budou lépe udržovatelné, lépe čitelné a snadněji se zapisují..
Máte-li zájem o další podobný CSS preprocesor, doporučuji se podívat na LESS (nebo se podívat na náš průvodce pro začátečníky) - základní princip je hodně stejný!
