2. díl - Úvod do CSS preprocesoru Sass

HTML a CSS Moderní a profesionální webové portfolio Úvod do CSS preprocesoru Sass

Sass je kompilovaný jazyk, který rozšiřuje syntaxi CSS o proměnné, cykly, podmínky, mixiny, funkce aj. Šetří čas, množství napsaného kódu, je přehlednější a snadněji se udržuje.

Jak jsme si uvedli v předešlém článku, budeme používat syntaxi SCSS (Sassy CSS), která rozšiřuje CSS syntaxi - to znamená, že jakýkoli CSS kód je kompatibilní s SCSS (naopak nikoli).

Pokaždé když vytvoříte nějaký SCSS soubor, musíme ho zkompilovat do CSS souboru pomocí kompilátoru Sass, který jsme si nainstalovali společně s Ruby v minulém článku. Samotný SCSS soubor nelze spustit, jelikož prohlížeč nezná jeho syntaxi a nemůže tedy ostylovat elementy.

Informace, dokumentace a ukázky kódu můžete také najít na oficiální stránce jazyka http://sass-lang.com

Jaké má používání preprocesoru, konkrétně Sass, výhody? Pojďme si je projít a předvést na ukázkách.

Komentáře

V SASS můžeme psát dva typy komentářů. První typ, ten klasický z CSS, /* ... */ se nám po kompilaci zachová, tedy se přenese jako komentář do výsledného CSS souboru. Druhý typ // ... se nám nezkompiluje a tudíž ho uvidíme pouze v SCSS souboru kde je umístěn.

Hnízdění (Nesting)

Hnízdění (originálně nesting) je styl zápisu, který umožňuje zanořovat CSS styly do sebe. Potomka tedy zapíšeme podobně jako každou jinou vlastnost. Tato funkce preprocesoru je velmi užitečná, jelikož ušetří mnoho nepříjemností s vypisováním desítek selektorů... Zanořovat do sebe můžete samozřejmě jakkoli a kolikrát jen chcete, avšak nejlepší je uplatnit nepsané pravidlo nepřesáhnout maximální počet zanoření 4.

Zde můžeme využívat také klíčového znaku &, který značí rodičovský element. Můžeme tak například snadno vnořit hover.

V případě, kdy budeme míti div, do kterého vložíme odstavec, který bude mít také hover efekt, můžeme nastylovat situaci tímto způsobem:

div
{
   background: white;
   width: 900px;
   margin: 0 auto;
   padding: 5px 10px;
   border: 1px solid #ccc;
   p
   {
      color: gray;
      font-family: 'Arvo', serif;
      &:hover
      {
         color: black;
      }
   }
}

Jak jste si jistě všimli, zápis se nám oproti klasickému CSS zpřehlednil a zkrátil.

Proměnné

Proměnné nám efektivně vyřeší náš problém s zdlouhavým přepisováním, což je v CSS docela otravné. V Sass začínají proměnné klíčovým znakem $, po kterém následuje [název-proměnné], dvojtečka a následně [hodnota].

Za zmínku stojí, že pokud změníme nějakou proměnnou uvnitř selektoru, změna se nám projeví v celém následujícím kódu níže.

Vytvoříme si proměnné pro barvy, písmo, šířku a padding. Následně proměnné aplikujeme na div a odstavec z minulé ukázky.

$root-barva: gray;
$druha-barva: black;

$div-pozadi: white;
$div-sirka: 900px;
$div-padding: 5px;
$div-border-barva: #ccc;

$odstavec-pismo: 'Arvo', serif;

div
{
   background: $div-pozadi;
   width: $div-sirka;
   margin: 0 auto;
   padding: $div-padding $div-padding*2;
   border: 1px solid $div-border-barva;
   p
   {
      color: $root-barva;
      font-family: $odstavec-pismo;
      &:hover
      {
         color: $druha-barva;
      }
   }
}

Dobře, teď to možná vypadá jako zdlouhavá blbost, ale počkejte, až si zkusíte proměnné na několika set řádkovém CSSku. :)

Kompilace - způsoby zápisu

Sass podporuje několik stylů zápisů do exportovaného CSS souboru - tedy to, jak nám vyleze CSS kód ven. Jednotlivé styly si ukážeme zase na našem jednoduchém kódu.

Compresed

Všechno je smrštěno na jeden řádek bez mezer. V PHPstormu a Sublime Textu přidejte do argumentu --style compressed.

div{background:#fff;width:900px;margin:0 auto;padding:5px 10px;border:1px solid #ccc}div p{color:gray;font-family:"Arvo",serif}div p:hover{color:#000}

Compact

Styly se uspořádají na řádky, kde každý řádek je vyhraněn pro jeden selektor. Řádky se stejným rodičem jsou odděleny prázdným řádkem.

div { background: white; width: 900px; margin: 0 auto; padding: 5px 10px; border: 1px solid #ccc; }
div p { color: gray; font-family: "Arvo", serif; }
div p:hover { color: black; }

Nested

Vytvoří "normální" CSS zápis, kde jsou jako u Compact selektory se stejným rodičem odděleny od jiných a navíc jsou selektory potomka vždy odsazené.

div {
  background: white;
  width: 900px;
  margin: 0 auto;
  padding: 5px 10px;
  border: 1px solid #ccc; }
  div p {
    color: gray;
    font-family: "Arvo", serif; }
    div p:hover {
      color: black; }

Expanded

Poslední zápis se liší od Nested neodsazenými selektory s potomky.

div {
  background: white;
  width: 900px;
  margin: 0 auto;
  padding: 5px 10px;
  border: 1px solid #ccc;
}
div p {
  color: gray;
  font-family: "Arvo", serif;
}
div p:hover {
  color: black;
}

Partials a @import

SASS podporuje vytváření tzv. partials. V překladu je můžeme nazvat jako části. Jsou to soubory, které obsahují SCSS kód, avšak nejsou určeny k přímé kompilaci. Takovéto soubory obvykle zapisujeme ve stylu _[název-souboru].scss. Podle podtržítka se pozná, že se právě tento soubor nemá kompilovat.

Části poté můžeme importovat do našich "hlavních" nebo seskupujících SCSS souborů. Pro importování slouží klíčové slovo @import. Importovat bychom měli mimo naše stylování úplně nahoře v souboru.

Za klíčové slovo musíme napsat název souboru v uvozovkách a případně i pod-složku. Úplně postačí, pokud do uvozovek uvedeme pouze [název-souboru], ale jsou možné i jiné varianty zápisu.

@import "_[název-souboru].scss";

@import "[název-souboru].scss";

@import "_[název-souboru]";

@import "[název-souboru]";

Pokud budeme míti partials v nějaké pod-složce, poté bude zápis tímto stylem - použít můžeme samozřejmě i ostatní možnosti zápisu viz. výše.

@import "[název-složky]/[název-souboru]";

Mixiny

Mixiny jsou části kódu, které se často opakují. Také jim můžeme přidávat nějaké vstupní parametry. Používají se tehdy, pokud používáme určitý kód vícekrát, tedy např. pro prefixování.

Pro definici mixinu využijeme Klíčové slovo @mixin, po kterém se píše [název-mixinu] a případně do závorky jeho parametry. K zavolání mixinu použijeme klíčové slovo @include, za něj název mixinu a případně v závorkách argumenty.

Mixiny se zapisují v horní části souboru, jelikož je můžeme volat pouze pod definicí. Doporučuji tedy vytvářet partial pro mixiny, které následně budeme volat pomocí @import.

Ukažme si příklad na mixinu, který nám zprefixuje border-radius.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.zaoblene
{
   @include border-radius(7px); //zavolání mixinu
   // ... zbytek stylů
}

Funkce

Funkce použijeme tehdy, když potřebujeme podle vstupních argumentů získat nějakou hodnotu. Funkce nám tedy vrací hodnotu.

@function muj-vypocet($prvni-cislo, $druhe-cislo){
  @return ($prvni-cislo + $druhe-cislo)*3;
}

Rozšíření

Rozšíření nám umožňuje znovu používat styly již existujících selektorů. Voláme ji pomocí klíčového slova @extend, po němž následuje [název-selektoru], jehož styl chceme použít. V podstatě nám aktuální selektor přiřadí ke stylu, ze kterého dědíme. Rozšíření voláme z pravidla na konci stylů daného selektoru.

Můžeme také využívat speciálního selektoru - placeholder selector - určeného pro dědění. Používáme k němu klíčový znak %, který nahrazuje tečku či mřížku jako u třídy či ID...

Ukažme si následující případ.

%sirka
{
   width: 500px;
}

div
{
   color: red;
   @extend %sirka;
}

p{
   color: blue;
   @extend %sirka;
}

A po kompilaci nám vyleze toto.

div, p
{
   width: 500px;
}

div
{
   color: red;
}

p
{
   color: blue;
}

Početní operace

Matematika nám v CSS určitě často chyběla. V Sass tedy nemusíme zadávat hodnoty fixně, ale vhodnou kombinací s proměnnými můžeme udělat divy. Můžeme jednoduše sčítat, odčítat, násobit, dělit, pracovat s procenty atd.

Základní početní operace.

width: (100% / 3) ;

width: 300px / 960px * 100%;

Podmínky

Podmíněné stylování se občas hodí, nejvíce pravděpodobně v kombinaci s mixinem či funkcí. V podmínce využíváme speciální znaky jako < (je menší než), > (je větší než), == (rovná se), != (nerovná se) atd.

Používáme klíčová @if - pro první možnost, @else if - pro další možnost, nebo @else - pro zbytek možností.

$sirka : 500px;

p {
   @if $sirka < 500px
   {
      background: red;
   }
   @else if $sirka == 500px
   {
      background: green;
   }
   @else
   {
      background: blue;
   }
}

V příštím článku si ověříme naše znalosti na řadě cvičeních.


 

Stáhnout

Staženo 366x (2.43 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

  Aktivity (2)

Článek pro vás napsal Honza Bittner
Avatar
Autor je vášnivý web developer. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (19 hlasů) :
4.947374.947374.947374.947374.94737


 


Miniatura
Předchozí článek
Příprava a nastavení

 

 

Komentáře
Zobrazit starší komentáře (20)

Avatar
vojtanosek
Člen
Avatar
vojtanosek:

Mám novější PHP storm tak mám s tím problém. File Watchers tam mám ale nemůžu ho nijak upravit. Mám i Ruby.

 
Odpovědět 24.6.2015 18:17
Avatar
Dominik Lev
Redaktor
Avatar
Dominik Lev:

Smim požádat o pomoc?? Vůbec sem nepochytal jak ma překompilovat SCSS na CSS, to dám ->Uložit jako nebo co s tim mám dělat??

Odpovědět 7. února 13:54
Dominik Lev
Avatar
Dominik Lev
Redaktor
Avatar
Odpovídá na Dominik Lev
Dominik Lev:

Ahh, sem vůl, už sem pochopil co dělat, doufám, ale když dám CTRL+B, tak to napíše

Errno::ENOENT: No such file or directory @ rb_sysopen -
Use --trace for backtrace.
[Finished in 0.3s]

nějaká rada?

Odpovědět  +1 7. února 14:20
Dominik Lev
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Dominik Lev
Honza Bittner:

Někde píšou, že může pomoci vymazat cache složku. (.sass-cache/ tuším)

Odpovědět 7. února 20:45
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Adam Kovářík:

Pěknej článek :-)

 
Odpovědět 29. února 15:29
Avatar
Odpovídá na Dominik Lev
František Peřina:

Ahoj mám ten samý problém jako ty. Nepodařilo se ti to nějak vyřešit?

 
Odpovědět 18. května 22:58
Avatar
Michal Ruml
Člen
Avatar
Michal Ruml:

ahoj prosím ťa k tej kompilácii csska chcem vyskúšať nested ale neviem kde do argumentu máš na mysli vložiť názov nested.

díky za radu

 
Odpovědět 8. července 12:38
Avatar
kuxik009
Redaktor
Avatar
kuxik009:

Ahoj, mám takový problém s PHPStormem, na který neznám odpověď. Používám auto upload na FTP, ale v kombinaci s SCSS to nefunguje. Resp. SCSS soubor se uploadne, ale zkompilovaný CSS musím vždy uploadovat ručně. Nevíte prosím někdo, jak tohle vyřešit? Díky moc, je to fakt dost otravný pořád uploadovat :-)

 
Odpovědět 16. července 15:15
Avatar
kuxik009
Redaktor
Avatar
kuxik009:

Mimochodem ještě mám dotaz k partials. Je to myšleno tak, že budu mít třeba soubor _tabulky.scss, a importuju jej pouze do SCSS těch stránek, kde využívám nějakou tabulku? Díky

 
Odpovědět 16. července 15:45
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na kuxik009
Honza Bittner:

Partials jsou soubory, které se samy od sebe nekompilují, tj. že abys využil kód obsažený v těchto souborech, musíš je někde naimportovat.

Odpovědět  +1 23. července 17:48
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 30. Zobrazit vše