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

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

ONEbit hosting Unicorn College 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 v Sass. Ty se přeci musejí 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í 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 příští lekci, Resety CSS a HTML 5 rozložení, si ukážeme, jak resetovat CSS styly a jak na HTML5 rozložení.


 

Stáhnout

Staženo 164x (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?
10 hlasů
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Miniatura
Předchozí článek
Datové typy v SASS
Miniatura
Následující článek
Resety CSS a HTML 5 rozložení
Aktivity (2)

 

 

Komentáře

Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:2.10.2014 17:54

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

Odpovědět 2.10.2014 17:54
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
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.