Řešené úlohy k úvodu do CSS preprocesoru SASS

V minulé lekci, Úvod do CSS preprocesoru Sass, jsme si ukázali základy preprocesoru Sass a taky jeho rozdíly oproti CSS.

Dnes si ověříme naše znalosti na praktických příkladech.

U každého cvičení nejprve uvidíte obrázek a pod ním návod, respektive informace, které vám mohou pomoci při psaní stylů. Samozřejmě si budete moci stáhnout obě dvě vypracované cvičení v odkazu na konci článku.

Cvičení 1

Jako první si vytvoříme jednoduchou webovou vizitku. Přepínání "pod-stránek" zde řešit nemusíme, uděláme pouze HTML a k němu styly.

Jednoduchá webová vizitka

Nejdříve si musíme vytvořit HTML kód, který bude obsahovat div.profil. V něm pak bude ul obsahující položky, které budou mít velikost 1/6 a jméno uprostřed bude velké 2/6. Později se sem můžete vrátit a udělat grid pomocí cyklů. Element div.profil bude dále obsahovat div.obsah, kde bude odstavec s textem.

Nezbývá nám nic jiného, než celý příklad nastylovat s využitím proměnných uvedených v kódu níže.

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

Cvičení 2

V dalším cvičením budeme dělat pozvánku na komunitní sraz.

Pozvánka na komunitní sraz

Tentokrát máme tedy vytvořit pozvánku na sraz. Nejdříve vytvoříme nějaký div.obsah, kde bude vše vložené. V něm budeme mít obrázek, nadpis <h1>, několik odstavců s popisem akce, nadpis <h2> a formulář pro přihlášení. Formulář bude obsahovat tabulku, v níž se bude zadávat jméno a potvrzovat příchod na akci. Také bude obsahovat potvrzovací tlačítko.

Nastylujete tedy pozvánku s využitím hnízdění, proměnných, rozšíření atd. Můžete využít následující proměnné.

$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 další lekci, Datové typy v SASS, si řekneme něco o datových typech v Sass.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

K absolvování tohoto cvičení prosím splň všechny příklady tím, že je úspěšně odevzdáš k otestování.