Cvičenie na úvod do CSS preprocesora SASS

Dobre, základy a ideu preprocesoru Sass som, snáď, už pochopili v minulom článku. Poďme si teda trochu overiť naše vedomosti na praktických príkladoch.

U každého cvičenia najprv uvidíte obrázok a pod ním návod, respektíve informácie, ktoré vám môžu pomôcť pri písaní štýlov. Samozrejme si budete môcť stiahnuť obe dve vypracované cvičenie v odkaze na konci článku.

Cvičenia 1

Ako prvý si vytvoríme jednoduchú webovú vizitku. Prepínanie "pod-stránok" tu riešiť nemusíme, urobíme iba HTML ak nemu štýly.

Jednoduchá webová vizitka

Najskôr si musíme vytvoriť HTML kód, ktorý bude obsahovať div.profil. V ňom potom bude ul obsahujúce položky, ktoré budú mať veľkosť 1/6 a meno uprostred bude veľké 2/6. Neskôr sa sem môžete vrátiť a urobiť grid pomocou cyklov. Element div.profil bude ďalej obsahovať div.obsah, kde bude odsek s textom.

Nezostáva nám nič iné, než celý príklad nastylovať s využitím premenných uvedených v kóde nižšie.

$barva-pozadi: #fff;
$barva-textu: #333;
$barva-textu-skryty: #aaa;
$barva-ramecek: #ccc;
$sirka-profilu: 600px;
$odsazeni: 25px;
$sirka-ramecku: 1px;

Cvičenia 2

V ďalšom cvičením budeme robiť pozvánku na komunitné zraz.

Pozvánka na komunitné zraz

Tentoraz máme teda vytvoriť pozvánku na zraz. Najskôr vytvoríme nejaký div.obsah, kde bude všetko vložené. V ňom budeme mať obrázok, nadpis <h1>, niekoľko odsekov s popisom akcie, nadpis <h2> a formulár pre prihlásenie. Formulár bude obsahovať tabuľku, v ktorej sa bude zadávať meno a potvrdzovať príchod na akciu. Tiež bude obsahovať potvrdzovacie tlačidlo.

Nastylujete teda pozvánku s využitím hniezdenia, premenných, rozšírenie atď. Môžete využiť nasledujúce premenné.

$barva-pisma: #333;
$odsazeni: 20px;
$padding: 10px;
$sirka-obsah: 900px;
$sirka-polozky: 600px;
$velikost-h1: 40px;
$velikost-h2: 25px;
$vyska-radku: 20px;
$tabulka-pozadi: #F6F6F6;
$tabulka-pismo: $barva-pisma;
$tabulka-ramecek: #C9CBCD;

V nasledujúcej lekcii si povieme niečo o dátových typoch v Sass.

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

Na absolvovanie tohto cvičenia prosím splň všetky príklady tým, že ich úspešne odovzdáš na otestovanie.