Nauč se X za Y minut

//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.
@function vypocitat-pomer($velikost, $velikost-rodice) {
  @return $velikost / $velikost-rodice * 100%;
}

$hlavni obsah: vypocitat-pomer(600px, 960px);

.hlavni-obsah {
  width: $hlavni-obsah;
}

.sloupec {
  width: vypocitat-pomer(300px, 960px);
}

/* Zkompiluje do: */

.hlavni-obsah {
  width: 62.5%;
}

.sloupec {
  width: 31.25%;
}



/*Dědění
==============================*/



/*Dědění je způsob jak používat vlastnosti pro jeden selektor ve druhém. */

.oznameni {
    @include velikost(5em, 5em);
    border: 5px solid $sekundarni-barva;
}

.oznameni-uspech {
    @extend .oznameni;
    border-color: #22df56;
}

/* Zkompiluje do: */
.oznameni, .oznameni-uspech {
  width: 5em;
  height: 5em;
  border: 5px solid #51527F;
}

.oznameni-uspech {
  border-color: #22df56;
}


/* Dědění CSS výrazů je preferováno před vytvořením mixinu kvůli způsobu,
   jakým způsobem Sass dává dohromady třídy, které sdílejí stejný kód.
   Kdyby to bylo udělané pomocí mixinu, tak výška, šířka, rámeček by byl v
   každém výrazu, který by volal mixin. I když tohle neovlivní vaše workflow,
   přidá to kód navíc do souborů. */


/*Zanořování
==============================*/



/*Sass vám umožňuje zanořovat selektory do selektorů */

ul {
    list-style-type: none;
    margin-top: 2em;

    li {
        background-color: #FF0000;
    }
}

/* '&' nahradí rodičovský element. */
/* Můžete také zanořovat pseudo třídy. */
/* Pamatujte, že moc velké zanoření do hloubky snižuje čitelnost.
   Doporučuje se používat maximálně trojité zanoření.
   Na příklad: */

ul {
    list-style-type: none;
    margin-top: 2em;

    li {
        background-color: red;

        &:hover {
          background-color: blue;
        }

        a {
          color: white;
        }
    }
}

/* Zkompiluje do: */

ul {
  list-style-type: none;
  margin-top: 2em;
}

ul li {
  background-color: red;
}

ul li:hover {
  background-color: blue;
}

ul li a {
  color: white;
}



/*Částečné soubory a importy
==============================*/   



/* Sass umožňuje vytvářet částečné soubory. Tyto soubory pomahájí udržovat váš
   kód modulární. Tyto soubory by měli začínat vždy '_', např. _reset.css.
   Částečné soubory se nepřevádí do CSS. */

/* Toto je kód, který si uložíme do souboru _reset.css */

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

/* Sass obsahuje @import, které může být použit pro import částečných souborů.
   Toto se liší od klasického CSS @import, který dělá HTTP požadavek na stáhnutí
   souboru. Sass vezme importovaný soubor a vloží ho do kompilovaného kódu. */

@import 'reset';

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}

/* Zkompiluje do: */

html, body, ul, ol {
  margin: 0;
  padding: 0;
}   

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}



/*Zástupné selektory
==============================*/  



/* Zástupné selektory jsou užitečné, když vytváříte CSS výraz, ze kterého
   chcete později dědit. Když chcete vytvořit výraz, ze kterého je možné pouze
   dědit pomocí @extend, vytvořte zástupný selektor s CSS výrazem. Ten začíná
   symbolem '%' místo '.' nebo '#'. Tyto výrazy se neobjeví ve výsledném CSS */

%okno-obsahu {
  font-size: 14px;
  padding: 10px;
  color: #000;
  border-radius: 4px;
}

.okno-zpravy {
  @extend %okno-obsahu;
  background-color: #0000ff;
}

/* Zkompiluje do: */

.okno-zpravy {
  font-size: 14px;
  padding: 10px;
  color: #000;
  border-radius: 4px;
}

.okno-zpravy {
  background-color: #0000ff;
}



/*Matematické operace
==============================*/   



/* Sass obsahuje následující operátory: +, -, *, /, and %. Tyto operátory
   můžou být velmi užitečné pro počítání hodnot přímo ve vašem souboru Sass.
   Níže je příklad, jak udělat jednoduchý dvousloupcový layout. */

$oblast-obsahu: 960px;
$hlavni-obsah: 600px;
$vedlejsi-sloupec: 300px;

$obsah-velikost: $hlavni-obsah / $oblast-obsahu * 100%;
$vedlejsi-sloupec-velikost: $vedlejsi-sloupec / $oblast-obsahu * 100%;
$zbytek-velikost: 100% - ($main-size + $vedlejsi-sloupec-size);

body {
  width: 100%;
}

.hlavni-obsah {
  width: $obsah-velikost;
}

.vedlejsi-sloupec {
  width: $vedlejsi-sloupec-velikost;
}

.zbytek {
  width: $zbytek-velikost;
}

/* Zkompiluje do: */

body {
  width: 100%;
}

.hlavni-obsah {
  width: 62.5%;
}

.vedlejsi-sloupec {
  width: 31.25%;
}

.gutter {
  width: 6.25%;
}