Lekce 4 - Cykly a @media v SASS

V minulé lekci, Datové typy v SASS, jsme si ukázali datové typy v preprocesoru Sass. Známe už třeba čísla, řetězce, barvy, booleany, seznamy či mapy.

Datové typy v Sass se přeci musejí dát nějak efektivně využít. Proto si dnes představíme cykly a @media v Sass.

Doufejme, že je do CSS někdy přidají! Stejně jako ostatní funkčnosti CSS preprocesorů.

Each

Each, zapisován klíčovým slovem @each, je cyklus, který čerpá hodnoty ze seznamu nebo mapy. U tohoto cyklu nepotřebujeme znát počet opakování - jednoduše se provede pro všechny prvky. Ukažme si tedy, jak se cyklus zapisuje.

Proměnná $hodnoty nám značí seznam či pole, z které hodnoty bereme. Proměnná $hodnota je pak každá hodnota sama o sobě.

@each $hodnota in $hodnoty {
      ... kód ...
}

Příklad 1

Na webu potřebujeme vytvořit hover styly pro odkazy na různé sociální sítě. Vytvoříme si tedy mapu s 5ti libovolnými sociálními sítěmi, která bude obsahovat jméno sítě jako klíč a barvu jako hodnotu. Cyklus each využijeme pro vytvoření tříd, které budeme moci dosadit odkazu.

$site: (
   itnetwork: #3b94e0,
   facebook: #3b5998,
   google: #DD4B39,
   twitter: #55acee,
   youtube: #e52d27
);

@each $sit, $barva in $site {
   .sit-#{$sit}:hover {
      color: $barva;
   }
}

Výsledek v zkompilovaném CSS:

.sit-itnetwork:hover {
    color: #3b94e0; }
.sit-facebook:hover {
    color: #3b5998; }
.sit-google:hover {
    color: #DD4B39; }
.sit-twitter:hover {
    color: #55acee; }
.sit-youtube:hover {
    color: #e52d27; }

While

While, zapisován klíčovým slovem @while, je cyklus, který běží do té doby, dokud platí podmínka. Cyklus musí tedy obsahovat vždy nějakou podmínku tak, aby cyklus někdy skončil. A takto náš cyklus zapíšeme:

@while [podmínka] {
     ... kód ....
}

For

For, zapisován klíčovým slovem @for, je cyklus určený pro práci s předem zadanou hodnotou opakování. Cyklus používá řídící proměnnou, které musíme zadat počáteční a konečnou hodnotu. Můžeme počítat od počáteční hodnoty do konečné hodnoty, ale bez ní (to), nebo do konečné hodnoty, ale včetně (through).

@for $i from $pocatecni [to/through] $konecna {
  ... kód ...
}

Příklad 2

Vytvoříme jednoduché sloupce pro grid o 12ti sloupcích. V našem řešení budeme počítat pouze šířku.

Nejdříve vytvoříme proměnnou $grid-pocet, kam uložíme počet sloupců - tedy 12. V samotném cyklu vždy vytvoříme třídu .sloupec-[cislo], do které dosadíme šířku sloupce výpočtem.

$grid-pocet: 12;

@for $i from 1 through $grid-pocet{
   .sloupec-#{$i} {
      width: (100% / $grid-pocet) * $i;
   }
}

Výsledek v zkompilovaném CSS:

.sloupec-1 {
    width: 8.33333%;
}

.sloupec-2 {
    width: 16.66667%;
}

.sloupec-3 {
    width: 25%;
}

.sloupec-4 {
    width: 33.33333%;
}

.sloupec-5 {
    width: 41.66667%;
}

.sloupec-6 {
    width: 50%;
}

.sloupec-7 {
    width: 58.33333%;
}

.sloupec-8 {
    width: 66.66667%;
}

.sloupec-9 {
    width: 75%;
}

@media

Každý jistě zná @media queries z CSS3. V SASS mají úplně stejnou funkci, tedy stylování elementů na základě šířky obrazovky. V Sassu mají tu výhodu, že @media mohou být použity pomocí hnízdění přímo v elementu.

Příklad 3

Připravme si odstavce, které vycentrujeme a nastavíme jim šířku 50%. Dále pro ně budeme upravovat barvu pozadí. Nastavíme modrou barvu pro odstavec širší než 500px a žlutou pro odstavec menší. Samozřejmě nepoužijeme @media 2x, ale jen jednou - chytře.

p {
   width: 50%;
   margin: 0px auto;
   background: yellow;

   @media (min-width: 500px) {
      background: blue;
   }
}

Určitě si domyslíte, že s @media můžeme kombinovat i cykly

V další lekci, Resety CSS a HTML 5 rozložení, se zaměříme na CSS reset, HTML skeleton a také si ukážeme, jak můžeme stylovat HTML5 elementy ve starších prohlížečích.

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š.