Lekce 2 - Úvod do CSS preprocesoru Sass

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

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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.

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 příštím článku si ověříme naše znalosti na řadě cvičeních.


 

Stáhnout

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

 

 

Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
28 hlasů
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Miniatura
Předchozí článek
Příprava a nastavení
Aktivity (3)

 

 

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

Avatar
Karel Labonek:9. dubna 20:19

jdu nato dám vědět děkuji

 
Odpovědět 9. dubna 20:19
Avatar
Karel Labonek:9. dubna 20:29

Omlouvám se máš trochu času? nerad otravuji, ale zřejmě bych to potřeboval projít krok po kroku, zřejmě dělám někde hloupou chybu.

 
Odpovědět 9. dubna 20:29
Avatar
Karel Labonek:9. dubna 20:41

když dám pravým tl. myš / NEW / FILE / name: SCSS / ok /
objeví se:
Register New File Type Association
v tom samém okně pod tímto je výběr:
Open matching files in phpstorm:
kde vyberu:
SCSS
pak hláška:
Enable file Watcher to compile SCSS to CSS?
dám "ok" a objeví se okno jak popisuje článek úvod, kde můžu měnit cestu uložení složky.
Je to takto správně? Děkuji za tvůj čas.

 
Odpovědět 9. dubna 20:41
Avatar
Karel Labonek:11. dubna 17:54

Ahoj,
trvalo to nějakou chvilku, ale už jsem to vyřešil. Samozřejmě to byla banalita, ale zabrala mi spoustu přemýšlení a zkoušení. Nevím jestli jsi to takto myslel, ale problém jsem vyřešil tím že když vytvářím v projektu nové soubory, tak se souborem "html" není problém protože ho vybírám přímo z nabízených možností, zato soubor SCSS tam není a když vytvářím tento soubor tak je nutné při zadání jména souboru ho napsat i s příponou ".scss" pak už šlape vše jak má :-) . Děkuji za tvoji odpověď v každém případě mě nasměrovala správným směrem . Samozřejmě musím ještě poděkovat za tvé články jsou super :-).

 
Odpovědět 11. dubna 17:54
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Karel Labonek
Honza Bittner:11. dubna 18:30

Ahoj, promiň, že jsem neodpověděl dříve, měl jsem nějaké povinnosti ve škole.

Ano, myslel jsem to tak, abys soubor s .css příponou přejmenoval na .scss příponu. :-)

Odpovědět 11. dubna 18:30
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na Honza Bittner
Karel Labonek:11. dubna 18:56

Žádnej problém, jsem rád, že je na koho se obrátit. Celej tento web je super !!! Je tu obrovská spousta zajímavosti a obrovsky mi to pomáhá při studiu IT ještě jednou děkuji :-) .

 
Odpovědět 11. dubna 18:56
Avatar
EweN
Člen
Avatar
EweN:5. července 18:33

Omlouvám se, ale je to hrozně nepřehledné. Nenarazil někdo na lepší návod? Děkuji

 
Odpovědět 5. července 18:33
Avatar
Odpovídá na EweN
Michal Novák:6. července 20:18

Nepřehledné? Lepší článek v CZ jsem na toto téma ještě nečetl...

 
Odpovědět 6. července 20:18
Avatar
EweN
Člen
Avatar
Odpovídá na Michal Novák
EweN:6. července 20:26

Asi jsem už moc namlsanej z tohoto webu. Každopádně jsem se nějakým způsobem prokousal k té placené části a už to začíná jít. Věřím tomu, že kdybych si chtěl znalosti jen oprášit .. tak mi to bude v pohodě stačit, ale jedu od nuly.. Tím samozřejmě nechci hanit práci jiných. =)

 
Odpovědět 6. července 20:26
Avatar
Odpovídá na EweN
Michal Novák:6. července 23:01

Je tu spousta informaci najednou, mozna proto pusobi neprehledne, ale staci si clanek precist nekolikrat a nove znalosti zkouset realizovat v praxi.

Ja osobne jsem diky tomuto clanku se SASS taky zacal, od nuly. Jen lituji, ze jsem na nej nenarazil driv. Nyni je pro me psani css zabavnejsi a prehlednejsi :-).

 
Odpovědět 6. července 23:01
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 46. Zobrazit vše