4. díl - Cykly a @media v SASS

HTML a CSS Moderní a profesionální webové portfolio Cykly a @media v SASS

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.

Z minulého článku jsme se naučili datové typy. Ty se přece musí dát nějak efektivně využít. Pojďme si tedy představit cykly a @media.

Doufejme, že je do CSS někdy přidají! Stejně jako ostatní vlastnosti 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 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;
   }
}

Vytvoření hover tříd pomocí mapy a cyklu each.

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í. Cyklu musíme zadat počáteční a konečnou hodnotu. Cyklus rozlišuje dva stavy. Můžeme počítat 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 12cti 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;
   }
}

For cyklus pro jednoduchý grid.

@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

Pro odstavce, které vycentrujeme a nastavíme jim šířku 50% budeme upravovat barvu pozadí. My si 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 domyslete, nebo ještě lépe vyzkoušejte kombinaci cyklů a @media. :) V příštím článku si ukážeme, jak resetovat CSS styly a jak na HTML5 rozložení.


 

Stáhnout

Staženo 146x (666 B)
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?
8 hlasů
Autor studuje FIT ČVUT. Zajímá se převážně o webové technologie. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Miniatura
Předchozí článek
Datové typy v SASS
Miniatura
Následující článek
Resety CSS a HTML 5 rozložení
Aktivity (1)

 

 

Komentáře

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:2.10.2014 17:54

Článek byl přepsán a upraven. :)

Odpovědět 2.10.2014 17:54
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
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 1 zpráv z 1.