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

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

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 134x (666 B)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

  Aktivity (1)

Článek pro vás napsal Honza Bittner
Avatar
Autor je vášnivý web developer. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (8 hlasů) :
55555


 


Miniatura
Předchozí článek
Datové typy v SASS
Miniatura
Následující článek
Resety CSS a HTML 5 rozložení

 

 

Komentáře

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

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

Odpovědět 2.10.2014 17:54
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
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.