Jsem si jistý, že jste už slyšeli o Sassovi a jak " opravdu je třeba začít používat!"
Učení nového nástroje může vysát a nalezení času, který je k tomu možné, je vedle toho nemožné, ale někdy přichází nástroj, který mění náš průmysl a je příliš dobrý na to, abychom ho ignorovali.
Díky tomu, že se naše webové stránky a aplikace stávají složitějšími, naše listy stylů se zvětšují a ztěžují jejich údržba. CSS preprocesory, jako je Sass, pomáhají udržovat naše styly přehledné a umožňují nám modularizovat náš kód a zároveň nabízet celou řadu funkcí, které ještě nejsou k dispozici v běžném CSS.
Tyto extra funkce také dělají opravdu zábavné použití! Teď jste možná viděli něco, co vypadá takto:
$i: 6;@while $i > 0 {.item-#{$i} {šířka: 2em * $ i; } $ i: $ i - 2;} // http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11
a přemýšlel: "Whatttttttttttt? Díky, ale budu držet můj pravidelný CSS. "
Přiznávám, vypadá to skličující a někteří lidé dělají opravdu šílený, komplexní věci s Sassem, ale jsem tady, abych vám řekl, že někdo může začít používat a zisky, které získáte v první den, z vás udělají věřící Sass.
Získání nástroje Sass pro projekt je trochu mimo rozsah tohoto článku, ale instalace je poměrně snadná a web Sass má instrukce pro Linux, Mac nebo PC. Chytrá věc je, jakmile je nainstalována, můžete vzít jakýkoliv soubor CSS, který máte, a přejmenovat jej .scss takže je to soubor Sass.
Všechny správně formátované CSS jsou platné Sass!
To znamená, že můžete začít používat Sass a pokračovat v psaní stylů, jako jste vždy používali, pomalu začlenit více funkcí, jak vaše úroveň pohodlí roste. To jsou správní lidé, stejně jako všichni. stejný ol ', ale zde je pět úžasných zisků, které máte nyní k dispozici:
Co je to hlavní záhlaví barvy znovu? Jak mohu napsat ten zásobník písma? Kolikrát jste psali CSS a museli prohledávat své předchozí styly za nějakou hodnotu nebo museli vypustit barvu kapátka, znovu zjistit, že šestnáctková barva?
Služba Sass poskytuje proměnné jako způsob, jak ukládat informace, které chcete opakovaně použít v rámci vašeho stylu. Nyní můžete tuto hodnotu barvy nebo dlouhý zásobník písma uložit jako něco snadno zapamatovatelného. Způsob, jakým deklarujete proměnnou, je znak dolaru $ následovaný jménem. Toto jméno může být jakkoli chcete. Potom zadejte dvojtečku : následovaná hodnotou a středníkem ; :
$mainFont: "Helvetica Neue", Arial, sans-serif;$mainColor: #CC6699;
Nyní, pokud chcete použít jednu z těchto hodnot, můžete místo toho použít proměnnou.
.mySelector { font-family: $mainFont; color: $mainColor; }
Úžasné, že? Tato vlastnost sama o sobě stojí za to, že to stojí za instalaci, protože šetří tolik času při tvorbě CSS. Je tak skvělé, že se pravděpodobně dostane do CSS spec ale kdo ví, kdy ji budeme moci používat? Naštěstí pro nás, se Sassem, nemusíte čekat.
Nyní můžete říkat, že "CSS má @import, není to tak cool" a měli byste mít pravdu, ale verze CSS a Sass se výrazně liší. V normálním CSS @import přitahuje další styly, ale dělá to tím, že dělá jiný požadavek HTTP, což se obvykle chceme vyhnout. Z tohoto důvodu jste ještě nemuseli použít @import. Sass, na druhé straně, je preprocesorem (důrazem na předběžnou), která bude v tomto souboru stahovat před tím, než sestaví CSS.
Výsledkem je jedna stránka CSS, která je zpracována jedním požadavkem HTTP. Co to znamená, že můžete rozdělit css na menší, udržovatelnější bloky a zároveň zobrazovat pouze jednu stránku prohlížeče. Potřebujete opravit text na tlačítku? Už žádné skimming styles listy hledat příslušné styly tlačítek. Stačí otevřít vaše tlačítko částečné a provést změny.
Co je částečné? Přesně to zní. Jsou to částečné soubory Sass, které obsahují malé fragmenty CSS, které můžete zahrnout do jiných souborů Sass. Jsou pojmenovávány pomocí předního podtržítka s názvem. _myFile.scss . Podtržítko umožňuje Sassovi vědět, že soubor je pouze částečný soubor a nesmí být kompilován do CSS. Chcete-li importovat tuto část, stačí přidat @import do souboru takto:
@import 'partials/myPartial';
Takže importuji _myPartial.scss, který se nachází ve složce s názvem partials. Není nutné zahrnout podtržítko nebo příponu souboru. Sass je dost chytrý, aby věděl, který soubor máš na mysli. Použití dílčích částí nám umožňuje skvělý způsob modularizace našeho kódu, který je více přenosný a jednodušší k udržování.
Sass přináší funkce vedle CSS strany. Vím, že ne každý je programátor a koncept funkce může být trochu nad hlavou, ale nebojte se, mnozí přidat mnoho užitečných funkcí, aniž by to bylo příliš složité. Pokud jde o barvy, existuje několik užitečných, které je lze manipulovat, ale tři se vyznačují úžasnými a snadnými zisky pro začátečníky. Podívejme se na to, jak je používáme.
//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)
Syntaxe je poměrně přímočará. Ve třech výše uvedených funkcích máme k dispozici dva argumenty. První je barva, kterou chceme manipulovat. Může to být hexadecimální, RGB nebo libovolný barevný formát, který je správný CSS. Může to být i proměnná. Druhým je množství, které chceme tuto barvu upravit. Udělejte 10% tmavší, zesvětlení o 5%, nastavte hodnotu alfa na hodnotu 0.6. Výsledkem této funkce je hodnota, která je nastavena v kompilovaném CSS. Takže dolů vidíte naše funkce v práci
//in parenthesis you can put any color value followed by the amount you want to modify it by.//lighten(#000, 10%)//darken(rgb(0,0,0), 25%)//rgba(blue, 0.6)//rgba($mainColor, 0.6)//use case$color: #333;//set color variable.myButton {background-color: rgba($color, 0.8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);}//this compiles to:.myButton {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;}Doufejme, že už uvidíte, jak to může být užitečné. Existuje tucet způsobů, jak využít tyto tři funkce pro přidání nějakého hezkého barevného kontrastu a mohou být použity kdekoli, kdy by normálně kolísala hodnota barvy. Tyto tři jsou jen špičkou ledovce. Existuje spousta barevných funkcí a mnoho kreativních způsobů, jak lze použít.
Některé věci v CSS jsou trochu únavné psát. Mixiny vytvářejí skupiny deklarací CSS, které můžeme znovu použít v našich stránkách. Styly CSS3, které vyžadují předpony dodavatelů, jsou dokonalým příkladem, kdy použít mixin. Namísto psaní stejné vlastnosti znovu a znovu napíšeme mixin jednou a pak voláme, že kdykoliv chceme použít mixin. Pro deklarování mixin používáme @mixin klíčové slovo. Dáme mu jméno a aplikujeme naše styly mezi kudrnaté příchytky, jako je tomu tak: @mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Argumenty mohou být dokonce přeneseny do mixinu, aby byly pružnější. Chcete-li použít náš mixin, použijeme pouze @include klíčové slovo.
//declare mixin(now being passed an argument)@mixin box-sizing($boxSize) {-webkit-box-sizing: $boxSize;-moz-box-sizing: $boxSize;box-sizing: $boxSize;}//use mixin.mySelector {@include box-sizing(border-box);}//compiled to:.mySelector {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
Jak vidíte ve výše uvedeném příkladu, voláme náš mixin s @include následované názvem mixin pak všechny argumenty v závorce. Přemýšlejte o tom, kolik času vás ušetří. Proč to nikdo nepoužívá?
Tyto nástroje byly skvělé, ale zachránil jsem to nejlepší naposledy. @extend je jednou z nejužitečnějších funkcí, která nám umožňuje sdílet sadu vlastností CSS z jednoho přepínače do druhého. Přemýšlejte o dvojici tlačítek, jako je tlačítko přijetí a odmítnutí na modálním okně. Vzhledem k tomu, že jsou obě tlačítka, pravděpodobně budou sdílet většinu stejného stylu, ale tlačítko pro odklon bude mít červené pozadí, aby vypadlo. S pomocí Sass zapisujeme výchozí styly pro všechna tlačítka a potom "rozšiřujeme" tyto styly na tlačítko odmítnutí, kde přidáme červené pozadí.
.button {background: rgba($color, .8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);padding: 1em;display: block;max-width: 200px;}.button-decline {@extend .button;background: red;}//compiles to.button, .button-decline {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;padding: 1em;display: block;max-width: 200px;}.button-decline {background: red;}Člověk, jak úžasné je, že se nemusíš opakovat? Nejen, že to podporuje modularizaci našich stylů, ale snižuje riziko ztráty stylu z tlačítka na tlačítko. To je obrovský čas save save! Vynásobte to pro všechny styly webu a máme výrazně zkrácený časový rámec pro psaní CSS.
Sakra, po celou dobu, kdy zachraňujeme, možná bychom se mohli naučit složitějším aspektům Sass.
Doufám, že jsem vás přesvědčil, abyste tento úžasný nástroj poskytli výstřel a ukázali některé funkce, které by mohly okamžitě zvýšit vaši produktivitu. Pravdou je, že mohu tento článek znovu napsat zítra a mít pět dalších opravdu čistých funkcí, které můžete sdílet. Je to tak úžasné! Sass (a další preprocesory) jsou tady, aby zůstali, a tak si udělejte laskavost a začněte je používat. Pro ty, kteří mají zájem dozvědět se více, podívejte se na tyto zdroje na Twitteru a na webu:
Twits:
Webové stránky:
A pokud jste v oblasti jižní Floridy, přijeďte s námi Jižní Florida Sass Meetup .