2. diel - Úvod do CSS preprocesora Sass

Sass je kompilovaný jazyk, ktorý rozširuje syntax CSS o premenné, cykly, podmienky, mixin, funkcia ai. Šetrí čas, množstvo napísaného kódu, je prehľadnejšie a ľahšie sa udržuje.

Ako sme si uviedli v predchádzajúcom článku, budeme používať syntax SCSS (Sassy CSS), ktorá rozširuje CSS syntax - to znamená, že akýkoľvek CSS kód je kompatibilný s SCSS (naopak nie).

Zakaždým keď vytvoríte nejaký SCSS súbor, musíme ho skompilovať do CSS súboru pomocou kompilátora Sass, ktorý sme si nainštalovali spoločne s Ruby v minulom článku. Samotný SCSS súbor nedá spustiť, pretože prehliadač nepozná jeho syntax a nemôže teda ostylovat elementy.

Informácie, dokumentácia a ukážky kódu môžete tiež nájsť na oficiálnej stránke jazyka http://sass-lang.com

Aké má používanie preprocesoru, konkrétne Sass, výhody? Poďme si ich prejsť a predviesť na ukážkach.

Komentáre

V Sass môžeme písať dva typy komentárov. Prvý typ, ten klasický z CSS, / * ... * / sa nám po kompiláciu zachová, teda sa prenesie ako komentár do výsledného CSS súboru. Druhý typ // ... sa nám nezkompiluje a teda ho uvidíme len v SCSS súbore.

Hniezdenia (Nesting)

Hniezdenie (originálne nesting) je štýl zápisu, ktorý umožňuje ponoriť CSS štýly do seba. Potomka teda zapíšeme podobne ako každú inú vlastnosť. Táto funkcia preprocesoru je veľmi užitočná, pretože ušetrí veľa nepríjemností s vypisovaním desiatok selektorov ... ponoriť do seba môžeme samozrejme akokoľvek a koľkokrát len chceme, ale najlepšie je uplatniť nepísané pravidlo nepresiahnuť maximálny počet zanorenia 4.

Tu môžeme využívať aj kľúčového znaku &, ktorý značí rodičovský element. Môžeme tak napríklad ľahko vnoriť hover.

Predstavme si, že máme <div>, do ktorého vložíme odsek. Na odsek budeme chcieť umiestniť hover efekt, ale len ak je vložený v tomto divu. Situáciu môžeme nastylovať týmto spôsobom:

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;
      }
   }
}

Ako ste si iste všimli, zápis sa nám oproti klasickému CSS sprehľadnil a skrátil.

Premenné

Premenné nám efektívne vyrieši náš problém sa zdĺhavým prepisovaním, čo je v CSS docela otravné. V Sass začínajú premennej kľúčovým znakom $, po ktorom nasleduje názov-premennej, dvojbodka a následne [hodnota].

Za zmienku stojí, že ak zmeníme nejakú premennú vnútri selektora, zmena sa nám prejavia v celom kóde.

Vytvoríme si premenné pre farby, písmo, šírku a padding. Následne premenné aplikujeme na <div> a odsek z minulej ukážky.

$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;
      }
   }
}

Dobre, teraz to možno vyzerá ako zdĺhavý nezmysel, ale počkajte, až si skúsite premenné na niekoľkých stoviek riadkovom CSSku

Kompilácie - spôsoby zápisu

Sass podporuje niekoľko štýlov zápisov do exportovaného CSS súboru - teda to, ako nám vylezie CSS kód von. Jednotlivé štýly si ukážeme zase na našom jednoduchom kódu.

Compresed

Všetko je zmrštenie na jeden riadok bez medzier. V PhpStormu a Sublime Textu pridajte 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

Štýly sa usporiadajú na riadky, kde každý riadok je vyhranený pre jeden selektor. Riadky s rovnakým rodičom sú oddelené prázdnym riadkom.

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

Vytvorí "normálne" CSS zápis, kde sú ako u Compact selektory s rovnakým rodičom oddelené od iných a navyše sú selektory potomka vždy odsadené.

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 sa líši od Nested neodsazenými selektory s potomkami.

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áranie tzv. Partials. V preklade ich môžeme nazvať ako časti. Sú to súbory, ktoré obsahujú SCSS kód, ale nie sú určené na priamu kompiláciu. Takéto súbory zvyčajne zapisujeme v štýle _ [názov-súboru] .scss. Podľa podčiarknutia sa pozná, že sa práve tento súbor nemá kompilovať.

Časti potom môžeme importovať do našich "hlavných" alebo zoskupujúce SCSS súborov. Pre importovanie slúži kľúčové slovo @import. Importovať by sme mali mimo naše štýlovanie úplne hore v súbore.

Za kľúčové slovo musíme napísať názov súboru v úvodzovkách a prípadne i podpriečinok. Úplne postačí, ak do úvodzoviek uvedieme iba názov-súboru, ale sú možné aj iné varianty zápisu.

@import "_název-souboru.scss";

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

@import "_název-souboru";

@import "název-souboru";

Ak budeme mať partials v nejakej podpriečinku, potom bude zápisnica týmto štýlom - použiť môžeme samozrejme aj ostatné možnosti zápisu viď. vyššie.

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

Mixin

Mixin sú časti kódu, ktoré sa často opakujú. Tiež im môžeme pridávať nejaké vstupné parametre. Používajú sa vtedy, ak používame určitý kód viackrát, teda napr. Pre vendor prefixy.

Pre definíciu mixin využijeme Kľúčové slovo @mixin, po ktorom sa píše názov-mixin a prípadne do zátvorky jeho parametre. K zavolanie mixin použijeme kľúčové slovo @include, za neho názov mixin a prípadne v zátvorkách argumenty.

Mixin sa zapisujú v hornej časti súboru, pretože ich môžeme volať iba pod definíciou. Odporúčam teda vytvárať partial pre mixin, ktoré následne budeme volať pomocou @import.

Ukážme si príklad na mixin, ktorý nám zprefixuje vlastnosť border-radius vendor prefixy.

@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ů
}

Funkcie

Funkcia použijeme vtedy, keď potrebujeme podľa vstupných argumentov získať nejakú hodnotu. Funkcia nám teda vracia hodnotu.

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

Rozšírenie

Rozšírenie nám umožňuje znovu používať štýly už existujúcich selektorov. Voláme je pomocou kľúčového slova @extend, po ktorom nasleduje [názov-selektora], ktorého štýl chceme použiť. V podstate nám aktuálnej selektor priradí k štýlu, z ktorého dedíme. Rozšírenie voláme z pravidla na konci štýlov daného selektora.

Môžeme tiež využívať špeciálneho selektora - placeholder selector - určeného pre dedenie. Používame k nemu kľúčový znak %, ktorý nahrádza bodku (.) Či mriežku (#) ako u triedy či ID ...

Ukážme si nasledujúci prípad.

%sirka
{
   width: 500px;
}

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

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

A po kompiláciu nám vylezie toto.

div, p
{
   width: 500px;
}

div
{
   color: red;
}

p
{
   color: blue;
}

Početné operácie

Matematika nám v CSS určite často chýbala. V Sass teda nemusíme zadávať hodnoty fixne, ale vhodnou kombináciou s premennými môžeme urobiť divy. Môžeme jednoducho sčítať, odčítať, násobiť, deliť, pracovať s percentami atď.

Základné početné operácie.

width: (100% / 3) ;

width: 300px / 960px * 100%;

Podmienky

Podmienené štýlovanie sa občas hodí, najviac pravdepodobne v kombinácii s mixin či funkcií. V podmienke využívame špeciálne znaky ako <(je menšia ako),> (je väčší než), == (rovná sa),! = (Nerovná sa) atď.

Používame kľúčové @if - pre prvú možnosť, @else if - pre ďalšiu možnosť, alebo @else - pre zvyšok možností.

$sirka : 500px;

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

V ďalšom článku si overíme naše znalosti na rade cvičeniach.

V nasledujúcom cvičení, Cvičenie na úvod do CSS preprocesora SASS, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.