4. diel - Cykly a @media v SASS

Z minulého článku sme sa naučili dátové typy v Sass. Tie sa predsa musia dať nejako efektívne využiť. Poďme si teda predstaviť cykly a @media.

Dúfajme, že je do CSS niekedy pridajú! Rovnako ako ostatné funkčnosti CSS preprocesorov.

Each

Each, zapisovaný kľúčovým slovom @each, je cyklus, ktorý čerpá hodnoty zo zoznamu alebo mapy. U tohto cyklu nepotrebujeme poznať počet opakovaní - jednoducho sa vykoná pre všetky prvky. Ukážme si teda, ako sa cyklus zapisuje.

Premenná $hodnoty nám značí zoznam či pole, z ktorej hodnoty berieme. Premenná $ hodnota je potom každá hodnota sama o sebe.

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

Príklad 1

Na webe potrebujeme vytvoriť hover štýly pre odkazy na rôzne sociálne siete. Vytvoríme si teda mapu s 5ti ľubovoľnými sociálnymi sieťami, ktorá bude obsahovať meno siete ako kľúč a farbu ako hodnotu. Cyklus each využijeme pre vytvorenie tried, ktoré budeme môcť dosadiť odkazu.

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

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

Výsledok v skompilované 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, zapisovaný kľúčovým slovom @while, je cyklus, ktorý beží do tej doby, kým platí podmienka. Cyklus musí teda obsahovať vždy nejakú podmienku tak, aby cyklus niekedy skončil. A takto náš cyklus zapíšeme:

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

For

For, zapisovaný kľúčovým slovom @for, je cyklus určený pre prácu s vopred zadanou hodnotou opakovania. Cyklus používa riadiace premennú, ktoré musíme zadať počiatočnú a konečnú hodnotu. Môžeme počítať od počiatočnej hodnoty do konečnej hodnoty, ale bez nej (to), alebo do konečnej hodnoty, ale vrátane (through).

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

Príklad 2

Vytvoríme jednoduché stĺpce pre grid o 12tich stĺpcoch. V našom riešení budeme počítať iba šírku.

Najskôr vytvoríme premennú $grid-pocet, kam uložíme počet stĺpcov - teda 12. V samotnom cykle vždy vytvoríme triedu .sloupec-[cislo], do ktorej dosadíme šírku stĺpca výpočtom.

$grid-pocet: 12;

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

Výsledok v skompilované 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ý určite pozná @media queries z CSS3. V SASS majú úplne rovnakú funkciu, teda štýlovanie elementov na základe šírky obrazovky. V SASS majú tú výhodu, že @media môžu byť použité pomocou hniezdenia priamo v elementu.

Príklad 3

Pripravme si odseky, ktoré vycentrujeme a nastavíme im šírku 50%. Ďalej pre nich budeme upravovať farbu pozadia. Nastavíme modrú farbu pre odstavec širší ako 500px a žltú pre odstavec menšie. Samozrejme nepoužijeme @media 2x, ale len raz - chytro.

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

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

Určite si domyslíte, že s @media môžeme kombinovať aj cykly V budúcej lekcii, Reset CSS a HTML 5 rozloženie , si ukážeme, ako resetovať CSS štýly a ako na HTML5 rozloženie.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.