Lekce 2 - Úvod do CSS preprocesoru Sass

V minulé lekci, Příprava a nastavení, jsme si uvedli základní informace pro tvorbu profesionálního webu. Představili jsme si nejvhodnější jazyky a nastavení editoru/IDE.

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é lekci, 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é lekci. 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 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.

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ůžeme samozřejmě jakkoli a kolikrát jen chceme, 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.

Představme si, že máme <div>, do kterého vložíme odstavec. Na odstavec budeme chtít umístit hover efekt, ale pouze pokud je vložený v tomto divu. Situaci můžeme nastylovat 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 se 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 kódu.

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ý nesmysl, 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 podslož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ít partials v nějaké podslož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 vendor prefixy.

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

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 je 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 následujícím cvičení, Řešené úlohy k úvodu do CSS preprocesoru SASS, si procvičíme nabyté zkušenosti z předchozích lekcí.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.