Sass je rozšíření jazyka CSS, který přidává nové vlastnosti jako proměnné, zanořování, mixiny a další.
Sass (a další preprocesory, jako [Less](http://lesscss.org/)) pomáhají vývojářům psát udržovatelný a neopakující (DRY) kód.
Sass nabízí dvě možnosti syntaxe. SCSS, které je stejná jako CSS, akorát obsahuje nové vlastnosti Sassu. Nebo Sass, který používá odsazení místo složených závorek a středníků.
Tento tutoriál bude používat syntaxi CSS.
Pokud jste již obeznámeni s CSS3, budete schopni používat Sass relativně rychle. Nezprostředkovává nějaké úplně nové stylové možnosti, spíše nátroje, jak psát Vás CSS kód více efektivně, udržitelně a jednoduše.
```scss
//Jednořádkové komentáře jsou ze Sassu při kompilaci vymazány
/*Víceřádkové komentáře jsou naopak zachovány */
/*Proměnné
==============================*/
/* Můžete uložit CSS hodnotu (jako třeba barvu) do proměnné.
Použijte symbol '$' k jejímu vytvoření. */
$hlavni-barva: #A3A4FF;
$sekundarni-barva: #51527F;
$body-font: 'Roboto', sans-serif;
/* Můžete používat proměnné napříč vaším souborem.
Teď, když chcete změnit barvu, stačí ji změnit pouze jednou.*/
body {
background-color: $hlavni-barva;
color: $sekundarni-barva;
font-family: $body-font;
}
/* Toto se zkompiluje do: */
body {
background-color: #A3A4FF;
color: #51527F;
font-family: 'Roboto', sans-serif;
}
/* Toto je o hodně více praktické, než měnit každý výskyt barvy. */
/*Mixiny
==============================*/
/* Pokud zjistíte, že píšete kód pro více než jeden element, můžete jej uložit do mixinu.
Použijte '@mixin' direktivu, plus jméno vašeho mixinu.*/
@mixin na-stred {
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
/* Mixin vložíte pomocí '@include' a jména mixinu */
div {
@include na-stred;
background-color: $hlavni-barva;
}
/*Což se zkompiluje do: */
div {
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
background-color: #A3A4FF;
}
/* Můžete využít mixiny i třeba pro takovéto ušetření práce: */
@mixin velikost($sirka, $vyska) {
width: $sirka;
height: $vyska;
}
/*Stačí vložit argumenty: */
.obdelnik {
@include velikost(100px, 60px);
}
.ctverec {
@include velikost(40px, 40px);
}
/* Toto se zkompiluje do: */
.obdelnik {
width: 100px;
height: 60px;
}
.ctverec {
width: 40px;
height: 40px;
}
/*Funkce
==============================*/
/* Sass obsahuje funkce, které vám pomůžou splnit různé úkoly. */
/* Funkce se spouštějí pomocí jejich jména, které následuje seznam argumentů uzavřený v kulatých závorkách. */
body {
width: round(10.25px);
}
.footer {
background-color: fade_out(#000000, 0.25)
}
/* Se zkompiluje do: */
body {
width: 10px;
}
.footer {
background-color: rgba(0, 0, 0, 0.75);
}
/* Můžete také definovat vlastní funkce. Funkce jsou velmi podobné mixinům.
Když se snažíte vybrat mezi funkcí a mixinem, mějte na paměti, že mixiny
jsou lepší pro generování CSS kódu, zatímco funkce jsou lepší pro logiku.
Příklady ze sekce Matematické operátory jsou skvělí kandidáti na
znovupoužitelné funkce. */
/* Tato funkce vrací poměr k velikosti rodiče v procentech.
Divili jste se někdy, jestli je Sass zkratka nebo ne? Pravděpodobně ne, ale řeknu vám to stejně. Jméno tohoto jazyka je slovo, "Sass", a ne zkratka.
Protože to lidé konstatně píší jako "SASS", nazval ho autor jazyka jako "Syntactically Awesome StyleSheets" (Syntaktický úžasně styly).
## Procvičování Sassu
Pokud si chcete hrát se Sassem ve vašem prohlížeči, navštivte [SassMeister](http://sassmeister.com/).
Můžete používát oba dva způsoby zápisu, stačí si vybrat v nastavení SCSS nebo SASS.
## Kompatibilita
Sass může být použit v jakémkoliv projektu, jakmile máte program, pomocí kterého ho zkompilujete do CSS. Pokud si chcete ověřit, že CSS, které Sass produkuje je kompatibilní s prohlížeči:
[QuirksMode CSS](http://www.quirksmode.org/css/) a [CanIUse](http://caniuse.com) jsou skvělé stránky pro kontrolu kompatibility.
