Začínáme s sass css. Kontrolní příkazy a výrazy. Převod CSS zpět na SASS
Což je potřeba pro kompilaci kódu na preprocesorech SASS a LESS. Podívejme se, jak pracovat s preprocesorem SASS.
Předzpracování
Psaní CSS je zábavné samo o sobě, ale když se šablona stylů zvětší, je obtížné ji udržovat. A v tomto případě nám pomůže preprocesor. SASS vám umožňuje používat funkce, které nejsou dostupné v samotném CSS, například proměnné, vnořování, mixiny, dědičnost a další pěkné věci, které vrací pohodlí psaní CSS.
Jakmile začnete používat SASS, preprocesor zpracuje váš soubor SASS a uloží jej jako jednoduchý soubor CSS, který můžete použít na libovolném webu.
Proměnné
Přemýšlejte o proměnných jako o způsobu ukládání informací, které chcete používat při psaní všech stylů projektu. Do proměnných můžete ukládat barvy, zásobníky písem nebo jakékoli jiné CSS hodnoty které chcete použít. Chcete-li vytvořit proměnnou v Sass, musíte použít symbol $. Podívejme se na příklad:
$font-stack: Helvetica, sans-serif; $primary-color: #333; tělo ( font: 100 % $font-stack; barva: $primary-color; )
Když je Sass zpracován, vezme hodnoty, které jsme nastavili v $font-stack a $primary-color, a vloží je do běžného souboru CSS na místa, kde jsme zadali proměnné jako hodnoty. Díky tomu jsou proměnné výkonnou funkcí, například při práci s barvami značky používanými na celém webu.
Text ( písmo: 100% Helvetica, bezpatkové; barva: #333; )
Hnízdění
Na psaní HTML Možná jste si všimli, že má jasnou vnořenou a vizuální hierarchii. To není případ CSS.
Sass vám umožní vnořit selektory CSS stejným způsobem jako ve vizuální hierarchii HTML. Pamatujte však, že nadměrné vnořování způsobuje, že váš dokument je méně čitelný a srozumitelný, což je považováno za špatný postup.
Abychom pochopili, co máme na mysli, uvádíme typický příklad stylů navigace na webu:
Nav ( ul ( margin: 0; padding: 0; list-style: none; ) li ( display: inline-block; ) a ( display: block; padding: 6px 12px; text-decoration: none; ) )
Všimli jste si, že ul, li a selektory jsou vnořeny do selektoru navigace? Tento skvělý způsob aby byl váš soubor CSS čitelnější. Když vygenerujete soubor CSS, výstup bude něco takového:
Nav ul ( margin: 0; padding: 0; list-style: none; ) nav li ( display: inline-block; ) nav a ( display: block; padding: 6px 12px; text-decoration: none; )
Fragmentace
Můžete vytvořit úryvky souboru Sass, které obsahují malé úryvky CSS, které lze použít v jiných souborech Sass. Je to skvělý způsob, jak udělat váš CSS modulární a také snadnější na údržbu. Fragment je jednoduchý soubor Sass, jehož název začíná podtržítkem, například _partial.scss. Podtržítko v názvu souboru Sass říká kompilátoru, že se jedná pouze o úryvek a neměl by být kompilován do CSS. Fragmenty Sass jsou zahrnuty pomocí direktivy @import.
Importovat
CSS má funkci importu, která vám umožňuje rozdělit soubor CSS na menší a usnadnit jejich údržbu. Tato metoda má ale významnou nevýhodu: pokaždé, když v CSS použijete @import, vytvoří se v CSS další HTTP požadavek. Sass přebírá myšlenku importu souborů přes direktivu @import, ale místo vytvoření samostatného HTTP požadavku, Sass importuje soubor uvedený v direktivě do toho, kde je volán, tj. Výstupem je jeden CSS soubor zkompilovaný z několika fragmentů.
Například máte několik fragmentů souboru Sass - _reset.scss a base.scss. A chceme importovat _reset.scss do base.scss.
// _reset.scss html, tělo, ul, ol ( margin: 0; padding: 0; ) // base.scss @import "reset"; tělo ( písmo: 100% Helvetica, bezpatkové; barva pozadí: #efefef; )
Všimněte si, že používáme @import 'reset'; v souboru base.scss. Když importujete soubor, nemusíte zadávat příponu .scss. Sass je chytrý jazyk a přijde na to sám. Po vygenerování CSS získáte:
Html, tělo, ul, ol ( okraj: 0; odsazení: 0; ) tělo ( písmo: 100 % Helvetica, bezpatkové; barva pozadí: #efefef; )
Mixins (mixiny)
Některé věci v CSS je docela zdlouhavé psát, zvláště v CSS3, kde navíc často potřebujete používat velký počet předpony dodavatele. Mixiny vám umožňují vytvářet skupiny deklarací CSS, které budete na svém webu používat vícekrát. Pro předpony prodejců je dobré používat mixiny. Příklad pro poloměr ohraničení:
@mixin border-radius($radius) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; ) .box ( @include border-radius(10px); )
Pro vytvoření mixinu použijte direktivu @mixin + název mixinu. Pojmenovali jsme náš mixin border-radius. Také v mixinu používáme proměnnou $radius uvnitř závorek, což nám umožňuje předat do proměnné, co chceme. Jakmile vytvoříte mixin, můžete jej použít jako parametr CSS zahájením volání @include a názvem mixinu. Když se vaše CSS zkompiluje, dostanete toto:
Box ( -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; )
Dědictví
Toto je jedna z nejužitečnějších funkcí Sass. Pomocí direktivy @extend můžete dědit sady vlastností CSS z jednoho selektoru na druhý. To udržuje váš soubor Sass čistý. V našem příkladu vám ukážeme, jak stylizovat oznámení o chybě, varování a úspěchu.
Zpráva ( border: 1px solid #ccc; padding: 10px; color: #333; ) .success ( @extend .message; border-color: green; ) .error ( @extend .message; border-color: red; ) . upozornění ( @extend .message; border-color: yellow; )
Výše uvedený kód vám umožňuje převzít vlastnosti CSS z .message a aplikovat je na .success, .error a .warning. Během kompilace souboru CSS funguje kouzlo, které vám pomůže vyhnout se psaní zbytečných tříd HTML prvky. Výsledek vypadá takto:
Zpráva, .success, .error, .warning ( border: 1px solid #cccccc; padding: 10px; color: #333; ) .success ( border-color: green; ) .error ( border-color: red; ) .warning (barva ohraničení: žlutá; )
Matematické operátory
Použití matematiky v CSS je velmi užitečné. Sass má několik standardních matematických operátorů, jako jsou +, -, *, / a %. V našem příkladu provádíme jednoduchou matematiku pro výpočet šířky strany a článku.
Kontejner ( šířka: 100 %; ) článek ( plovoucí: vlevo; šířka: 600px / 960px * 100 %; ) stranou ( plovoucí: vpravo; šířka: 300px / 960px * 100 %; )
Vytvořili jsme jednoduchou responzivní modulární mřížku o šířce 960 pixelů. Použití matematické operátory, vzali jsme výsledná data s hodnotami pixelů a převedli je na procenta bez velkého úsilí. Kompilovaný CSS vypadá takto:
Kontejner ( šířka: 100 %; ) článek ( plovoucí: vlevo; šířka: 62,5 %; ) stranou ( plovoucí: vpravo; šířka: 31,25 %; )
Praktický příklad:
V našem HTML souboru potřebujeme pouze velmi jednoduchý kód a odkaz na soubor CSS ve složce CSS našeho projektu.
To je vše HTML, co potřebujeme! Nyní přejděme k Sassovi. Přihlaste se k oblíbeným textový editor a vytvořit nový soubor, uložte jej do složky sass a pojmenujte jej style.scss. Pro usnadnění budeme vše psát v SCSS, což zvládne i Sass a SCSS není na začátečníky moc striktní. Na začátek našeho souboru napíšeme základní reset pro HTML, import pro kompas a zápis variabilní barvy pro tlačítko.
@import "kompas"; //Simple reset body, div, a ( margin: 0; padding: 0; border: 0; ) a (text-decoration: none;) a:focus (obrys: 0;) // Barevné proměnné $button-color: #2e6bc6; $button-start: #37a0dc; $button-stop: #2068a6; $hranice: #163861; $text-shadow: #06304b; //Barvy kurzoru $button-hover-color: #2e7dc6; $button-hover-start: #3f9ff0; $button-hover-stop: #2874a9; $focus-shadow: #0b3c5f; //Základní styly těla ( rodina písem: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; )
V horní části souboru nazýváme Compass, abychom jej zahrnuli do souboru a použili abstraktní třídy později. Kromě toho jsme napsali jednoduchý reset a jednu vlastnost jsme již použili: proměnné. To nám dává možnost ukládat hodnoty, které budeme používat v našem CSS, včetně barev, hodnot písem a mnoha dalších! Zde je používám pro uložení barev použitých v tlačítku a pro zjednodušení zápisu opětovné použití ve stylovém listu.
Přiřazení stylů tlačítku
.button ( šířka: 158px; výška: 30px; okraj: 120px auto; font-size: 16px; font-weight: bold; text-align: center; display: block; color: #fff; padding: 7px 0 0; border : 1px solid $border: 0 -1px 0 $text-shadow: relativní;Pojďme si toto tlačítko upravit! Začneme aplikací základních stylů na značku třídy tlačítka. Nastavil jsem zde několik základních stylů tlačítek a všimněte si, jak používám proměnné.
Nyní pojďme k zábavnější části! Pamatujete si import kompasu umístěný na začátku šablony stylů? Použijeme to zde, protože Compass ano velká knihovna vestavěné třídy, které obsahují předpony CSS3 pro ty prohlížeče, které stále potřebují podporu předpon.
Tlačítko ( šířka: 158px; výška: 30px; okraj: 120px automaticky; velikost písma: 16px; váha písma: tučné; zarovnání textu: na střed; zobrazení: blok; barva: #fff; odsazení: 7px 0 0; ohraničení: 1px solid $border text-shadow: 0 -1px 0 $text-shadow position: relativní //Třídy kompasu @include background($button-color linear-gradient(top, $button-start 20%, $button-; stop)); @include border-radius(3px) @include box-shadow(inset 0 1px 0 rgba(#fff, 0,8));
Po počátečním definování stylů můžeme zahrnout několik abstraktních tříd pro barvy pozadí, lineární přechody, poloměry a přechody rámu. Nejlepší je, že se vše zkompiluje pouze s nezbytnými předponami a ušetří nám čas při jejich psaní! Třída se zatím zkompiluje v souboru style.css do následujícího:
Tlačítko ( šířka: 158px; výška: 30px; okraj: 120px automaticky; velikost písma: 16px; váha písma: tučné; zarovnání textu: na střed; zobrazení: blok; barva: #fff; odsazení: 7px 0 0; ohraničení: 1px solid #163861 text-shadow: 0 -1px 0 #06304b; pozice: relativní pozadí: #2e6bc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #37a0dc; ), color-stop(100%, #2068a6) pozadí: #2e6bc6 -webkit-linear-gradient(top, #37a0dc 20%, #2068a6 background: #2e6bc6 -moz-linear-gradient(top, #); 37a0dc 20%, #2068a6 pozadí: #2e6bc6 -o-linear-gradient(top, #37a0dc 20%, #2068a6 background: #2e6bc6 linear-gradient(top, #37a0dc 20%, #2068a6); -poloměr-okraje: 3px -o-poloměr-okraje: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0,8); moz-přechod: všech 0,3s lehkost; přechod: všech 0,3 s snadnost; )
Styly psaní s vnořenými prvky
Další skvělou funkcí preprocesoru, jako je Sass, je schopnost vnořovat prvky a připojovat třídy k rodičovskému prvku, kterému přiřazujete styly. To se pak zkompiluje do požadovaného CSS, aby fungovalo.
Tlačítko ( &:hover ( @include background($button-hover-color linear-gradient(top, $button-hover-start 20%, $button-hover-stop)); @include box-shadow(inset 0 1px 1px rgba(#fff, 0,95)); @include background(linear-gradient(bottom, $button-start 20%, $button-stop)); text-shadow: 0 1px 0px $text-shadow; @ include box-shadow(inset 0 2px 8px $focus-shadow) )
Po stylech hlavního tlačítka můžete vnořit selektory pseudotříd pro stavy :hover a :active prvku pomocí ampersandu, který říká Sass, že se jedná o vnořenou třídu připojenou k rodičovský prvek. Ve stavu visení můžete přidat důraz na přechod a vnitřní stín pomocí abstraktní třídy Kompas, zatímco aktivní stav: aktivní obrátí přechod a změní stín rámečku tak, aby vypadal, jako by bylo stisknuto tlačítko.
Button:hover ( background: #2e7dc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3f9ff0), color-stop(100%, #2874a9)); background: #2e7dc6 -webkit-linear-gradient(top, #3f9ff0 20%, #2874a9 pozadí: #2e7dc6 -moz-linear-gradient(top, #3f9ff0 20%, #2874a9 -gradient(top, #3f9ff0 20); %, #2874a9 pozadí: #2e7dc6 linear-gradient(top, #3f9ff0 20%, #2874a9: inset 0 1px 1px rgba(255, 255, 255, 0,95); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0,95 active ( background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(20%, #37a0dc)); , color-stop(100%, #2068a6) background: -webkit-linear -gradient(bottom, #37a0dc 20%, #2068a6 background: -moz-linear-gradient(bottom, #37a0dc 20%, #); 2068a6); pozadí: -o-linear-gradient(dole, #37a0dc 20%, #2068a6 background: linear-gradient(bottom, #37a0dc 20%, #2068a6); -webkit-box-shadow: inset 0 2px 8px #0b3c5f; -moz-box-shadow: inset 0 2px 8px #0b3c5f; box-shadow: inset 0 2px 8px #0b3c5f; )
Výše uvedené ukazuje, co se stane poté, co jsou stavy :active a :hover zkompilovány v Sass; jsou zapsány jako selektory pseudotříd k rodičovskému prvku v použitelném CSS, stejně jako CSS, které potřebujeme, doplněné o alternativy, abychom dokončili naše třístavové tlačítko.
style.scss a zkompilovaný stylový list
To je vše, co je k celému našemu souboru style.scss, protože je organizován, napsán jednoduše a obsahuje abstraktní třídy a proměnné, které za nás dělají nějakou práci a jsou pak zkompilovány do konečného souboru se stylem style.css.
27.07.2017
Tato série výukových programů SASS je určena pro začátečníky a zkušení vývojáři. Toto je první ze čtyřdílného tutoriálu, který vás provede preprocesorem, nainstaluje jej a seznámí se s některými jeho funkcemi.
Co je SASS?
SASS (Syntactically Awesome Style Sheets)- jeden z nejoblíbenějších. Jedná se o sadu funkcí CSS, které umožňují rychlejší a efektivnější kódování. SASS podporuje integraci s Firefox Firebug. SassScript umožňuje vytvářet proměnné, vnořené styly a zděděné selektory.
SASS umožňuje rychle a snadno psát méně (někdy výrazně méně) kódu CSS a dynamicky jej spravovat jako programovací jazyk (mimochodem to není programovací jazyk). Je to skvělý nástroj pro psaní funkčnějších a čistších CSS, který může urychlit pracovní postup každého návrháře a vývojáře.
Proč potřebujete SASS?
Většina frontendových frameworků, včetně Bootstrap, Materialize a Foundation, je postavena na tomto vynikajícím preprocesoru. Znalost SASS vám pomůže používat více funkcí těchto frameworků.
Jak používat SASS?
Existuje mnoho aplikací, které usnadňují a urychlují zahájení používání SASS: CodeKit, Compass, Koala atd. Dozvíte se o nich v dalších částech tutoriálu. V této kapitole nebudeme používat žádné jiné aplikace nebo nástroje než ty, které jsou potřebné ke spuštění SASS na počítači. Nemusíte si dělat starosti operační systém, protože všem uživatelům bude vše jasné.
Stáhněte a nainstalujte SASS
SASS můžete nainstalovat pouze na počítač, který již má nainstalovanou Ruby:
- Ruby je na Macu předinstalovaný, takže si můžete Sass Macintosh nainstalovat hned;
- Pokud používáte Windows, budete si muset nejprve stáhnout Ruby;
- Ruby na Linuxu lze stáhnout prostřednictvím správce balíčků apt, rbenv nebo rvm.
Jakmile je Ruby nainstalováno, můžete nainstalovat SASS na váš počítač. Otevřete příkazový řádek Ruby a nainstalujte SASS do vašeho systému:
Gem install sass
Pokud výše uvedený příkaz nefunguje, možná budete muset použít příkaz sudo:
Sudo gem install sass
Pokud chcete zkontrolovat verzi SASS, použijte následující příkaz:
SASS je nainstalován. Vytvořme složku projektu a nazvěme ji sass-basic. Vytvořte základní html soubor s následujícím kódem:
Můj první projekt SASS
Ahoj příteli, učím se SASS a je to opravdu úžasné.
Text( text-align: center; ) h1( color: #333; ) p( color: #666; )
Nyní musíte tento soubor zkompilovat pomocí příkazového řádku/terminálu. Otevřeme příkazový řádek ve stejném adresáři (pokud nefunguje běžný příkazový řádek, možná budete muset použít příkazový řádek Ruby). Zadejte následující a stiskněte Enter:
Sass --watch style.scss:style.css
Všimnete si, že byly vygenerovány nové soubory: style.css a style.css.map. Stojí za zmínku, že se nemusíte dotýkat souboru mapy, stejně jako souboru .css. Pokud chcete provést nějaké změny, můžete to udělat přes style.scss. Tento proces nemusíte opakovat pokaždé, když změníte styl. Kompilace SASS bude fungovat automaticky, když provedete změny v souboru .scss.
V další kapitole se podíváme na proměnné SASS a proč jsou nejvíce užitečné funkce SASS (a jakýkoli jiný preprocesor CSS).
Ahoj všichni! Jak rychle ten čas letí. Ani jsem si nevšiml, jak jsem přešel z psaní stylů z běžného Css na preprocesor Sass. Ale předtím jsem nerozuměl - co je to za Sass, k čemu je potřeba, je to pravděpodobně pro super pokročilé profesionály v rozložení. Ano, použití preprocesorů je krok vpřed nová úroveň ve vývoji webu, ale není zde nic děsivého nebo složitého a sami se přesvědčíte, když si tento článek přečtete až do konce.
Co je tedy konkrétně na preprocesoru a Sass dobré? Hned řeknu, že existují další, jako je Less, Stylus atd. Všechny fungují na stejném principu, ale každý má své vlastní vlastnosti. Sass si získal velkou oblibu mezi profesionály, díky čemuž je učení mnohem jednodušší. Jde jen o to, že čím populárnější technologie, tím větší komunita a rozsáhlejší dokumentace.
Preprocesory jsou navrženy tak, aby ulehčily vývojáři většiny rutinní úkoly při psaní kódu, čímž se zvyšuje rychlost a kvalita práce. Kromě CSS preprocesorů existují také HTML preprocesory, například Pug (Jade).
Struktura článku
Dokumentace
Developerem Sass je Francouz Hugo Giraudel, který už nějakou dobu žije v Německu. Dokumentace je samozřejmě v angličtině, ale já osobně ji dobře ovládám (je důležité umět technickou angličtinu). Existuje ale i překlad do ruštiny. Ještě bych doporučil Anglická verze, to proto, abychom si zvykli a studovali angličtinu stále hlouběji. Ale ani ten ruský na tom není hůř.
- Anglická dokumentace: http://www.sass-lang.com
- Ruská dokumentace: https://sass-scss.ru
Kompilace Sass do Css
Software, který používám ke kompilaci Sass do CSS, je plugin správce úloh Sass. Obecně platí, že Sass je aplikace (Gem) Rubínový jazyk. Pokud se tedy chcete obejít bez Gulpu, pak pro kompilaci do Css budete muset nainstalovat platformu programovacího jazyka Ruby. Nebudu vám nyní ukazovat, jak se to dělá, můžete si o tom přečíst na oficiálních stránkách.
Syntaxe - Sass, Scss
Okamžitě poznamenám, že existují 2 syntaxe pro psaní kódu: Sass a Scss.
Syntaxe Sass se mírně liší od Scss. Scss vypadá spíš jako normální css kód a Sass vynechává složené závorky a středníky mezi pravidly. Rozdíly jsou také ve způsobu zápisu některých funkcí a musíte si dávat pozor, jakou syntaxi zvolíte. Přípony souborů pro Sass − *.sass, a pro Scss - *.scss. Syntaxe Sass je starší a Scss přišel později, aby se začátečníkům snadněji učil. Sám jsem začal tento preprocesor studovat v Scss, bylo to snazší to tak pochopit. Nyní jsem přešel na Sass, je to pro mě pohodlnější.
Pokud mluvíme o Sass, pak je jeho struktura kódu postavena na základě odsazení (koneckonců v něm nejsou žádné složené závorky) a zde byste měli být opatrní, protože jak tabulátor (TAB - 4 mezery), tak obyčejné mezery ( obvykle je to dvojitá mezera). Vždy používám tabelátor.
Pamatujte! Pokud jako odsazení použijete tabulátor, pak by měly být vyloučeny mezery, aby bylo vše stejné. A naopak - pokud používáte mezery, pak by měl být tabulátor vyloučen. Jinak kompilátor vyvolá chybu.
Sass
.maincontent .main-title font-size: 30px font-weight: 700 margin: 0 0 30px .description margin-bottom: 30px p color: #444444 font-size: 16px line-height: 22pxScss
.maincontent ( .main-title ( font-size: 30px; font-weight: 700; margin: 0 0 30px; ) .description ( margin-bottom: 30px; p ( color: #444444; font-size: 16px; line -výška: 22px) ) )Ve většině editorů kódu (např. Vznešený text) je vyznačeno odsazení ve formě pruhů, které brání v záměně. V níže uvedených příkladech použiji syntaxi Sass.
Zjednodušte si život se Sass
Vnoření pravidel
To se mi na Sass líbilo od samého začátku, bylo to právě vnořování pravidel CSS do sebe. To ušetří spoustu času a kód je strukturovaný a snadno čitelný. Například, pokud chceme psát styly pro prvky konkrétního nadřazeného kontejneru, pak v Css musíme pokaždé zadat nadřazenou třídu, například takto:
Main .title ( font-size: 30px; color: #444; ) .main .subtitle (font-size: 20px; ) .main .description (font-size: 14px; margin-bottom: 30px; )
To znamená, že všude specifikujeme nadřazenou třídu.main a to zase není úplně pohodlné. Pomocí Sass to můžete napsat takto:
Scss
.main ( .title ( font-size: 30px; color: #444; ) .subtitle ( font-size: 20px; ) .description ( font-size: 14px; margin-bottom: 30px; ) )Sass
.main .title font-size: 30px barva: #444 .subtitle font-size: 20px .description font-size: 14px margin-bottom: 30pxSouhlasím, vypadá to mnohem přehledněji a můžete psát kód rychleji, protože nadřazenou třídu.main píšeme pouze jednou. Pokud mě chcete sledovat bez instalace Ruby a jakéhokoli podobného softwaru, můžete pro demonstraci použít online kompilátor.
Vnořené vlastnosti
Kromě pravidel vnořování v Sass existuje možnost vnořování vlastností. Zde je například postup, jak zapsat hodnoty okrajů:
Sass
.main .title margin: nahoře: 10px vpravo: 15px dole: 10px vlevo: 15pxCss
.main .title ( margin-top: 10px; margin-right: 15px; margin-bottom: 10px; margin-left: 15px; )Vazba selektoru nebo zřetězení - & znaménko
Psaní našeho kódu můžeme urychlit a učinit jej ještě kompaktnějším použitím zřetězení (spojení) pomocí symbolu - & . Jak to funguje? Máme například třídy jako: .main-title, .main-subtitle, .main-description. V Sass mohou být tyto třídy zapsány následovně:
Hlavní &-title font-size: 30px color: #444 &-title font-size: 20px &-description font-size: 14px margin-bottom: 30px
Main-title ( font-size: 30px; color: #444; ) .main-subtitle ( font-size: 20px; ) .main-description ( font-size: 14px; margin-bottom: 30px; )
Použití symbolu & připojíme se ke kořenové třídě, tedy in v tomto případě není třeba neustále opakovat root.main . Zároveň mějte na paměti, že jsme nevytvořili žádné podřízené prvky.
/* Odkaz */ a ( barva: červená; ) a:hover ( barva: modrá; ) /* Pseudoprvky */ .main::before ( content: ""; display: block; font-size: 20px; ) .main ::after ( content: ""; display: block; font-size: 30px; )
Někdy je potřeba zadat řetězec selektorů až k aktuálnímu prvku. Můžete jej samozřejmě přesunout do kořene, ale aby nedošlo k porušení vnoření, můžete jej napsat následovně:
Hlavní .kontejner a šířka: 700px
Container.main (šířka: 700 pixelů)
Stěhováním & po selektoru jsme změnili pořadí ukotvení, tj. třída.kontejner je v tomto případě rodič.
Vazba na rodičovský volič, ale o úroveň výše
Výše jsem jako příklad demonstroval kód Sass:
Hlavní &-title font-size: 30px color: #444 &-title font-size: 20px &-description font-size: 14px margin-bottom: 30px
Nyní si představte, že v bloku .main-title je další prvek, který je třeba explicitně nastylovat pomocí celého řetězce rodičů. Dlouho jsem jednoduše zadával název kořene (v tomto případě - .main), ale to není příliš pohodlné. Začal jsem šťourat v dokumentaci Sass a našel řešení. Ve skutečnosti je vše jednoduché - musíme deklarovat odkaz na rodiče a použít jej tam, kde je to nutné.
Takhle jsem to dělal předtím:
Main &-title font-size: 30px barva: #444 .main__icon // určete root.main, jinak, pokud použijete & bude odkazovat na .main-title color: #444 width: 20px &-subtitle font-size : 20px & -velikost písma popisu: 14px okraj-dolní: 30px
A teď můžete udělat toto:
Main $self: & // odkaz na nadřazenou &-title font-size: 30px color: #444 #($self)__icon // místo & použijte odkaz na nadřazenou barvu: #444 width: 20px &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px
Pokud jste si všimli, deklarovali jsme odkaz na rodiče - $self: & . To mi trochu připomíná odkaz na objekt (toto), který spustil událost v javaScriptu. Nyní, na správném místě, to můžeme jednoduše nazvat #($self) . Ukazuje se, jak je to všechno jednoduché, ale škrábal jsem se na hlavě a myslel jsem si, že v Sassu není řešení tohoto problému.
Main-title ( font-size: 30px; color: #444; ) .main-title .main__icon ( color: #444; width: 20px; ) .main-subtitle (font-size: 20px; ) .main-description ( font-size: 14px; margin-bottom: 30px)
Šablony
Často se stává, že několik prvků má stejný stylový základ, ale liší se od sebe pouze v několika pravidlech. Vezměme si například tlačítka. Pokud vezmeme stejnou velikost tlačítek, mohou se od sebe lišit pouze barvou: červená, zelená, šedá atd. Pokud používáte čistě CSS, budete muset zadat všechny barvy tlačítek v základních stylech, oddělené čárkami, nebo vytvořit základní třída. Ale v Sass je to mnohem jednodušší:
%button background-color: #666 border: 1px solid #666 padding: 0 20px font-size: 15px line-height: 40px height: 40px .button-green @extend %button background-color: green border-color: green . button-red @extend %button background-color: red border-color: red
Button-green, .button-red ( background-color: #666; border: 1px solid #666; padding: 0 20px; font-size: 15px; line-height: 40px; height: 40px; ) .button-green ( background-color: green; border-color: green ) .button-red ( background-color: red; border-color: red; )
Šablonou je v tomto případě volič tlačítka % (to je označeno znakem - %). To je výhodné, protože samotný selektor šablon není nikde zapojen a jeho styly jsou zděděny jinými selektory prostřednictvím direktivy - @rozšířit. Tuto šablonu lze použít tolikrát, kolikrát chcete, čímž se sníží množství kódu.
SassScript
V Sass, stejně jako v programovacích jazycích, existují funkce jako: vytváření proměnných, aritmetické operace(sčítání, odčítání, dělení, násobení atd.), iterace (smyčky), funkce (mixiny) a mnoho dalšího. To znamená, že Sass je druh programovacího jazyka, který je opět navržen tak, aby zjednodušil psaní kódu a výrazně urychlil práci.
Proměnné
Proměnná v Sass začíná znaménkem $ a název je napsán latinkou, například: $color . Je třeba poznamenat, že znaky: „ — "A" _ » jsou zaměnitelné. Pokud jste například zavolali $color-red , pak můžete zavolat $color_red . Proměnná je definována takto: $name: hodnota, například: $color: #f6f6f6 .
Proměnná deklarovaná mimo jakékoli úrovně vnoření je dostupná globálně, tzn. lze použít všude. Pokud definujete proměnnou na jakékoli úrovni vnoření selektoru, bude dostupná pouze na tuto úroveň. Aby to fungovalo globálně v celém dokumentu, musíte zadat klíčové slovo !globální.
Nadpis $font-size: 10px !global font-size: $font-size .subtitle font-size: $font-size
Obecně jsou proměnné úžasná věc, stačí je deklarovat a zadat hodnotu a pak je můžete používat, jak chcete, kdekoli. Můžeme například definovat barvy tak, že jim dáme konkrétní názvy, velikost písma, rodinu písem atd. a všechny významy obecně.
směrnice
@rozšířit
Této směrnice jsme se dotkli výše, když jsme studovali prázdnou šablonu. Pojďme si znovu upevnit znalosti. Použitím @rozšířit můžeme zkopírovat pravidla libovolného selektoru. Například během rozvržení se může stát, že prvek „ A"a prvek" B"může mít podobný vzhled. V tomto případě můžete napsat pravidla pro prvek „A“ a pro „B“ můžete jednoduše zkopírovat styly prvku „A“ a mírně předefinovat potřebné vlastnosti.
Block_a background-color: #cccccc border: 5px solid #999999 padding: 20px font-size: 30px height: 150px width: 150px .block_b @extend .block_a padding: 15px
Block_a, .block_b ( background-color: #cccccc; border: 5px solid #999999; padding: 20px; font-size: 30px; height: 150px; width: 150px; ) .block_b ( padding: 15px; )
V v tomto příkladu vytvořili jsme 2 stejné čtverce. Pro čtverec „B“ jsme pouze předefinovali vycpávka: 15 pixelů. Takto funguje @extend. Tuto direktivu používám poměrně často.
@importovat
Tato direktiva umožňuje spojit několik souborů stylů do jednoho. To je velmi výhodné, zvláště pokud je projekt velký. Nezaměňovat se směrnicí, která existuje v Css - @importovat. V CSS je povinný atribut − url().
Ve skutečnosti je pohodlnější psát styly různé soubory a každý má svůj vlastní účel. Celý rámec stránky lze například rozdělit do oblastí: header.sass, sidebar.sass, footer.sass. Vše můžete shromáždit v hlavním souboru main.sass pomocí @import. Soubory oblasti lze také zadat pomocí podtržítka na začátku názvu souboru, například: _header.sass, _sidebar.sass, _footer.sass. Takové soubory se nazývají fragmenty. Při importu fragmentů není nutné zadávat příponu souboru.
Jednoduchý import
@import "header.sass" @import "sidebar.sass" @import "footer.sass"
Import fragmentů
@import "záhlaví" @import "boční panel" @import "zápatí"
Soubory fragmentů mohou mít následující přípony: *.sass, *.scss nebo *.css. Hlavní soubor může mít například příponu *.sass a záhlaví webu, například s příponou *.scss. To znamená, že nezáleží na tom, jakou příponu hlavního souboru máte. Nutno podotknout, že při importu se všechny proměnné a mixiny (povíme si o nich níže) přenesou do hlavního souboru, do kterého import probíhá.
Můžete také určit import několika souborů oddělených čárkami: @import „header“, „sidebar“, „footer“.
Mějte na paměti, že import probíhá v místě, kde jste zadali direktivu @importovat. To se obvykle provádí na začátku dokumentu.
@at-root
Směrnice @at-root mluví sama za sebe a pokud je přeložena do ruštiny, bude to znít takto - "od kořene". Jinými slovy, přesuneme selektor do kořene, čímž zrušíme řetězec rodičovských selektorů. Zde si samozřejmě můžete položit otázku: „Proč je tato direktiva potřebná, když můžete selektor přesunout do kořenového adresáře ručně?“ Odpověď je jednoduchá – pohodlí psaní kódu bez porušení struktury. Když se naučíte pracovat se Sassem v plném rozsahu, pochopíte to.
Hlavní &-title font-size: 30px barva: #444 @at-root .main__icon color: #444 width: 20px
Main-title ( font-size: 30px; color: #444; ) .main__icon (color: #444; width: 20px; )
Kontrolní směrnice a výrazy
direktiva @if
Tato direktiva spustí styly, pokud výraz v ní uzavřený vrátí jakoukoli hodnotu kromě falešný A null.
$color: green .header @if $color == zelená barva pozadí: zelená @else if $color == modrá barva pozadí: modrá @else barva pozadí: #f6f6f6
Záhlaví (barva pozadí: zelená; )
Kdo zná alespoň základy programovacího jazyka (například javaScript nebo Php), nebude to mít s pochopením těžké. Podstata je zde stejná, hlavní věcí je znát syntaxi psaní kódu.
@pro směrnici
V programovacím jazyce (opět v Javascriptu nebo PHP) pomocí Pro můžete nastavit cyklus. V Sass tato direktiva dělá to samé – vytváří smyčku. Pro každou iteraci (opakování) se používá proměnná čítače, která mění výstupní data.
Direktiva má 2 formy zápisu: 1. @for $var from<начало>přes<конец>a 2. @pro $var od<начало>na<конец>. Pokud chcete, aby byla ve smyčce zahrnuta poslední číslice, použijte " přes". Podívejme se na příklad:
@pro $i od 1 do 6 .elem-item-#($i) background-image: url("images/image-#($i).jpg")
Elem-item-1 ( background-image: url("images/image-1.jpg"); ) .elem-item-2 ( background-image: url("images/image-2.jpg"); ) . elem-item-3 ( background-image: url("images/image-3.jpg"); ) .elem-item-4 ( background-image: url("images/image-4.jpg"); ) . prvek-položka-5 ( obrázek na pozadí: url("obrázky/obrázek-5.jpg"); )
K určení konečné hodnoty jsem použil klíčové slovo " na". V této situaci cyklus končí na čísle - 5 . Všimněte si, jak kompaktně vypadá kód Sass.
@každá směrnice
Směrnice @každý stejně jako @for zobrazuje hodnoty ve smyčce a je praktický, protože kromě čísel můžete iterovat i přes konkrétní hodnoty. Vezměme výše uvedenou smyčku a změňme ji na nějaké hodnoty.
@each $bgItem ve zvířeti, jezeře, moři, krajině, přírodě .elem-item-#($bgItem) background-image: url("images/image-#($bgItem).jpg")
Elem-item-animal ( background-image: url("images/image-animal.jpg"); ) .elem-item-lake ( background-image: url("images/image-jezero.jpg"); ) . elem-item-sea ( background-image: url("images/image-sea.jpg"); ) .elem-item-landscape ( background-image: url("images/image-landscape.jpg"); ) . elem-item-nature ( background-image: url("images/image-nature.jpg"); )
V tomto případě není vytvořena proměnná čítače a počet iterací závisí na počtu hodnot vytvořených po klíčové slovo « v". Hodnoty jsou vydávány prostřednictvím proměnné (v tomto příkladu $bgItem), jejíž název může být libovolný.
Mixiny (funkce)
Mixiny (mixiny) jsou jakousi funkcí, jako v programovacím jazyce, která je navržena tak, aby se zbavila opakujícího se kódu. Mixiny mohou obsahovat celé úryvky stylingu, které jsou povoleny v Sass. Pro větší názornost se podívejme na příklad.
@mixin align-center position: zcela nahoře: 50 % vlevo: 50 % transform: translate(-50%, -50%) .container @include align-center
Mixin je vytvořen s direktivou @mixin, za níž následuje název mixinu a také volitelně předávané parametry oddělené mezerou. Okamžitě poznamenám, že znaky pomlčky (-) a podtržítka (_) v názvu mixinu jsou zaměnitelné. Mixin může obsahovat nejen pravidla, ale také selektory. Výše jsem uvedl příklad elementárního mixinu bez parametrů.
Mixin je volán direktivou @include a poté, oddělený mezerou, uvedeme název vytvořeného mixinu. Ve výše uvedeném příkladu je to pomocí vystředění bloku podél osy X a podél osy Y absolutní umístění. Pokud to musíte používat často, pak budete souhlasit s tím, že je jednodušší prostě zavolat mixin, než psát centrovací styly znovu a znovu.
Nyní se podíváme na mixin s parametry (argumenty).
@mixin border($width, $color) border: width: $width style: solid color: $color .square @include border(2px, #ccc)
Čtverec ( šířka okraje: 2px; styl okraje: plný; barva okraje: #ccc; )
Jak vidíte, za názvem mixinu v závorce udáváme argumenty, v tomto případě šířku a barvu ohraničení. Toto je nejjednodušší mixin, který jsem pro přehlednost poskytl. V praxi můžete najít složitější mixiny využívající různé podmínky a proměnné. Ale nekomplikujme si teď všechno, vždy bychom měli začít něčím malým a jednoduchým a pak se posouvat nahoru.
Tímto chci dokončit svůj krátká recenze Sass preprocesor. Proč malý? Ano, protože to není vše, co jsem vám řekl. Obecně platí, že pomocí výše uvedeného můžete nyní bezpečně začít používat Sass místo Css. Více o Sass se můžete dozvědět v dokumentaci, kterou jsem uvedl výše.
Dobře, děkuji vám všem za pozornost! Jako vždy se zeptejte v komentářích a přihlaste se k odběru telegramového kanálu nebo e-mailového zpravodaje (formulář na postranním panelu vpravo), abyste nepřišli o nic zajímavého.
Uvidíme se v mých dalších příspěvcích...
Článků o SASS (SCSS), Méně o Habrahabru je již spousta, ale podle mého názoru není dost ani jeden, ve kterém by byla trochu reálná praxe. Pokusím se tuto mezeru vyplnit. Asi před rokem mě jeden z článků SASS „uchytil“ a od té doby jsem si tuto technologii tak zamiloval, že ruční vytáčení běžný CSS kód mi připadá jako ztráta času. Tento článek je věnován těm designérům layoutů (či webovým programátorům), kteří o SCSS ještě neslyšeli, nebo ho ještě v praxi nevyzkoušeli. Zkušenější soudruzi se v tom, věřím, nemají čeho chytit.
Co je SCSS
SCSS je „dialekt“ jazyka SASS. Co je SASS? SASS je jazyk podobný HAML (velmi stručný šablonový engine), ale navržený tak, aby zjednodušil tvorbu kódu CSS. Jednoduše řečeno, SASS je jazyk, jehož kód je přeložen do běžného kódu CSS speciálním programem ruby . Syntaxe tohoto jazyka je velmi flexibilní, zohledňuje mnoho maličkostí, které jsou v CSS tak žádoucí. Navíc má dokonce logiku (@if, every), matematiku (můžete sčítat čísla, řetězce a barvy). Možná se vám některé funkce SCSS budou zdát nadbytečné, ale podle mého názoru nebudou zbytečné, zůstanou „v záloze“.Rozdíl mezi SCSS a SASS je ten, že SCSS je více podobný běžnému CSS kódu. Příklad kódu SASS:
$blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border polstr: $margin / 2 margin: $margin / 2 border-color: $blue
A to samé na SCSS:
$modrá: #3bbfce; $margin: 16px; .content-navigation ( border-color: $blue; color: darken($blue, 9%); ) .border ( padding: $margin / 2; margin: $margin / 2; border-color: $blue; )
SCSS jsem si vybral, protože je srozumitelnější pro kolegy, kteří s ním ještě nejsou obeznámeni. Také by stálo za zmínku, že běžný kód CSS dobře zapadá do syntaxe SCSS.
Instalace a použití
Nejprve musíte nainstalovat ruby. Poté musíte nainstalovat sass-gem (gem install sass do konzole). Pokud vše proběhlo hladce, pak je vám nyní k dispozici konzolový program sass. O všech nuancích jeho použití si můžete přečíst zde - sass --help. Budu mluvit pouze o dvou základních funkcích:--hodinky
Pokud spustíte sass s přepínačem --watch, program bude sledovat soubory, které určíte. Pokud se změní, automaticky znovu sestaví všechny potřebné soubory css (ne všechny, ale pouze ty, které jsou spojeny se změněnými).Předpokládejme, že máte následující strukturu projektu:
Css ---- scss ------ style.scss ---- style.css
Je nutné, aby sass sledoval všechny změny v css/scss/* a výsledek uložil do css/*.css . V tomto případě spusťte sass takto: sass --watch css/scss:css/. . Tito. sass --sleduj [co]:[kde] .
--aktualizovat
Pokud potřebujete aktualizovat soubory css jednou, použijte --update místo --watch. Nebude žádný dohled, stejně jako kontroly potřeby aktualizace.Za zmínku stojí, že na rozdíl od Lesse SASS neumí zkompilovat svůj kód přímo v prohlížeči. Podle mého názoru je tento přístup (kompilace na serveru nebo PC layout designer) jediný správný.
Praxe
Takže se dostáváme k tomu nejdůležitějšímu. Začněme @importem .@importovat
Zpočátku, předtím pomocí SCSS, všechny CSS Kód motoru, se kterým musím ve službě pracovat, byl v jednom obrovském souboru style.css. Moje IDE (Netbeans (mimochodem zde je plugin pro zvýraznění syntaxe)) s tím pracovalo s výrazným zpomalením. Nikdo to nechtěl rozdělit na mnoho menších souborů a v případě potřeby je sloučit do 1. SCSS řeší tento problém automaticky.Za zmínku stojí 1 nuance. Pokud nepodáváte sass konkrétní zdrojový soubor, ale adresář, pak css soubory nebude generováno pro soubory začínající na _ . Tito. přítomnost souboru style.scss povede k vytvoření souboru style.css, ale přítomnost souboru _some.scss nikoli.
Abychom zahrnuli obsah souboru _template.scss nebo template.scss, napíšeme
@import "šablona"; // šablony
Nakonec jsem místo 1 velkého souboru style.css skončil s více než stovkou malých souborů scss. Na první pohled se může zdát, že toto množství je příliš velké a povede k hrozným mukám. Potřebný soubor však najdu okamžitě na základě vhodné adresářové struktury. Navíc se domnívám, že díky ukládání do mezipaměti je toto „schéma“ výkonnější.
@ hnízdění
Jednou z nejžádanějších funkcí CSS je vnořování selektorů. Příklad:#some ( border: 1px full red; .some ( background: white; ) ) /* => */ #some ( border: 1px full red; ) #some .some ( background: white; )
Další příklad:
Vstup ( orámování: 1px plná šedá; pozadí: bílá; & ( barva: černá; ) &.some_class (zobrazení: žádné; ) ) /* => */ vstup (ohraničení: 1px plná šedá; pozadí: bílá; ) vstup ( barva: černá; input.some_class ( display: none; )
Znak & je ekvivalentní rodičovskému selektoru. Řekněme značku
$IE_7: "body.ie_7"; //... .some ( display: inline-block; #($IE_7) & ( zoom: 1; display: inline; ) ) /* => */ .some ( display: inline-block; ) body.ie_7 .nějaké (přiblížení: 1; zobrazení: vložené; )
$proměnné
Proměnné jsou šikovná věc. Jsou definovány takto:$some:red;
Proměnné nejsou konstanty, lze je v průběhu kódu měnit :) Jedna z mých prvních myšlenek vyústila v soubor _const.scss, který obsahuje všechny základní barvy, velikosti písma atd.
$link: #15157d; $odkaz_bottom: $odkaz; $input_font_size: 13px; $content_bg: #F1F1F1; $input_color: #4E4D4D; $input_color_placeholder: #959595; $barva_textu: černá; ...
Předpokládá se, že barva odkazů na webu je $link .
A ( barva: $odkaz; ) span.link ( barva: $odkaz; text-decoration: underline; )
Pokud se později ukáže, že se barva odkazů změnila, stačí změnit 1 proměnnou (v případě CSS by bylo potřeba soubory automaticky nahradit, třeba i selektivně). Předpokládejme, že se najednou ukáže, že v některém modulu kontaktů je barva odkazů jiná. Existují minimálně dvě řešení.
$contacts_link: orange; // kód modulu používající $contacts_link místo $link
Druhý
$__link: $link; $link: orange; // kód modulu $link: $__link;
Naše proměnné nejsou napsané, takže mohou stejně dobře obsahovat řetězce, čísla a barvy.
@matematika
Rozdělme matematiku do 2 kategorií – barvy a čísla. Začněme čísly. Jednoduchý příklad:Blok ( $block_width: 500px; odsazení: 5px; ohraničení: 1px plná černá; šířka: $block_width - (5px * 2) - (1px * 2); )
Pokud chcete, můžete také nastavit výplň s okrajem pomocí proměnných. Vše závisí na složitosti rozvržení.
Další příklad:
Blok ( $count: 10; $margin_left: 5px; $all_width: 1000px; width: $all_width; .sub_element ( width: ($all_width / $count) - $margin_left; margin: 0 0 0 $margin_left; ) )
To bych rád poznamenal tento druh manipulace se používají velmi často. Bez nich jsem jako bez nohou.
A teď ty barvy. Barvy lze přidávat a násobit:
Some ( $color: #010203; color: $color; border-color: $color - #010101; &:hover ( color: #010203 * 2; ) ) /* => */ .some ( color: #010203; border-color: #000102; .some:hover ( barva: #020406; )
Docela šikovná věc, když jste líní vybírat barvy. K dispozici jsou také funkce jako opacifikace a průhlednost (více
Sass (Syntactically Awesome Stylesheets)- jedná se o skript metamova, který je zkompilován v originálním CSS stylu. Pokud dobře znáte CSS + HTML, pak SASS pochopíte za pár dní.
Každý, kdo se zabývá CSS větším než 500 řádky, bude mít hlavu z toho, jak to opravit. Bohužel během hodin vývoje standardů pro kaskádové styly se jejich struktura radikálně nezměnila. Vimogi před rozložením, komu budu kecy, - usadili se ve spěchu. Pokud by 50-70 řádků stylů dokázalo navrhnout jednoduchý web, tak dnes je povinnost něco takového zobrazovat na záhlaví. To a to - jen na mém :).
V roce 2007 se objevila první verze SASS, kterou vyvinul Hampton Catlin. Nemyslím si, že jednoduchý soubor pravidel a jednoduchý kompilátor byly zamýšleny jako jeden z hlavních nástrojů front-end masterů a designérů rozložení moderního internetu.
Přípony souborů SASS mohou být .sass і . scss- To je způsobeno vybranou syntaxí. Prohlížeč však žádnému z nich nerozumí, takže pro vzájemné porozumění je třeba použít kompilátor. Cílem je převést SASS na jednoduché, klasické CSS, které rozpozná každý prohlížeč.
Role kompilátoru může stahovat js na straně serveru nebo program nainstalovaný na vašem pracovním počítači a sledovat změny v pracovních souborech.
Jaké jsou syntaxe v Sass?
Jazyk má dva hlavní „dialekty“: SASS a nový SCSS. Rozdíly mezi nimi jsou malé, pokud jsou porušena pravidla syntaxe, soubor nelze zkompilovat. Syntaxe SASS nemá složené oblouky, vnořování prvků do nových je implementováno pomocí dalších vstupů a pravidla stylu jsou posílena novými řádky.
Bez ohledu na syntaxi je SCSS podobný CSS. Pak bude jakýkoli CSS určitě efektivní kód SCSS.
Kvůli nedostatku mašlí a velkých písmen nemá syntaxe SASS s CSS žádnou hodnotu.
Vigodi Sass
Řeknu vám pár slovy začátek a pak podám krátkou zprávu. V CSS nikdy nedošlo k žádným změnám a důležité jsou hacky pro kompatibilitu mezi prohlížeči. Níže na zadcích uvidíte, že SASS je v nebezpečí a oba problémy jsou blíž.
Změny (proměnné)
Sass umožňuje přiřadit změny – a to je jedna z klíčových výhod. Termín analogicky s php začíná znakem dolaru ($), hodnoty jsou přiřazeny za doplňkovým dvojitým znakem.
Zprávy v Sass lze rozdělit do 4 typů:
- číslo (int)
- řetězec
- Booleovský typ (so/nor, boolean)
- barvy (jména, jména)
Dám vám jednoduchý příklad, jakmile se jakékoli téma stane relevantním, aby vám bylo vše jasné a vy sami všemu porozuměli.
Syntaxe SCSS
$modrá: #3bbfce; /* barva */ $margin: 16px; /* přístup */ $fontSize: 14px; /* velikost textu */ .content ( okraj: 1px plný $modrý; /* modrý okraj */ barva: ztmavit ($modrá, 20 %); /* ztmavit barvu o 20 % */ ) .okraj ( odsazení: $ okraj / 2: $margin / 2;
Syntaxe SASS
$blue: #3bbfce $margin: 16px $fontSize: 14px .ohraničení obsahu: 1px plné $modrá barva: ztmavit($modrá, 20%) .výplň okraje: $margin / 2 margin: $margin / 2 border-color: $ modrý
Výsledek v CSS
Obsah ( border: 1px solid #3bbfce; color: #217882; ) .border ( padding: 8px; margin: 8px; border-color: #3bbfce; )
Jak vidíte, v důsledku toho odstraníme původní CSS. Pojďme pryč.
Pravidla hnízdění
Sass bych ocenil jen za ty, co hnízdí v novém. Usnadní to úpravy stylů a navigaci v souboru pracovních stylů.
Nav ( ul ( margin: 0; padding: 0; list-style: none; ) li ( display: inline-block; ) a ( display: block; padding: 6px 12px; text-decoration: none; ) )
Nav ul ( margin: 0; padding: 0; list-style: none; ) nav li ( display: inline-block; ) nav a ( display: block; padding: 6px 12px; text-decoration: none; )
Již se nebudete muset starat o zařazení prvků a správnost rozpadu tříd. Vizuálně vložen do Sass, střed prvku Father's rule bude zachován ve stejné hierarchii pravidel CSS.
Přídavek (míchání)
Pravidlo DRY (Do not Repeat Yourself) je v Sass implementováno pomocí techniky mixin. Tyto kousky kódu, které jste pravděpodobně museli duplikovat v CSS, můžete zde uložit na samostatné místo a vložit na požadovaná místa. Kompilátor po provedení takové změny ušetří nahrazení potřebného kódu.
@mixin table-base ( th ( text-align: center; font-weight: bold; ) td, th ( padding: 2px ) ) #data ( @include table-base; )
#data th ( text-align: center; font-weight: bold; ) #data td, #data th ( padding: 2px; )
Argumenty
Navíc můžete změnit kód v umístění argumentů, které mu byly předány. Například kompatibilita mezi prohlížeči s Hakami může být umístěna v jedné řadě.
@mixin border-radius($radius) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; ) .box -1 ( @include border-radius(10px); ) .box-2 ( @include border-radius(5px); )
Box-1 ( -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; ) .box-2 ( -webkit-border-radius: 5px -moz-poloměr-okraje: 5px; -ms-poloměr-okraje: 5px;
Dědičnost (prodloužit)
Jakmile jednou vytvoříme pravidlo, můžeme ho vikorizovat uprostřed něčeho jiného. Prvek dědičnosti odebírá třídy potomka všechny pravomoci, které můžeme přidat k ostatním.
Error ( border: 1px #f00; background: #fdd; ) .error.intrusion ( font-size: 1.3em; font-weight: bold; ) .badError ( @extend .error; border-width: 3px; )
Error, .badError ( border: 1px #f00; background: #fdd; ) .error.intrusion, .badError.intrusion ( font-size: 1.3em; font-weight: bold; ) .badError ( border-width: 3px; )
Jedná se o jednoduché příležitosti, jak zvýšit plynulost rozvržení a zabránit ztrátě kódu v kódu. Pokaždé, pro mě. Stojí za to připomenout, že veškerá dokumentace o SASS je na webu s příklady a popisem zprávy (v angličtině).
Kompilátory
Překladačové programy kontrolují změny v souborech .scss a .sass a automaticky z nich kompilují hotové styly. Vyberte si proč - osa možností, jak potěšit distributory.
