Procvič si angličtinu zdarma s naším americkým e-learningem! Learn more

Cvičení k úvodu do CSS preprocesoru SASS

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Dobře, základy a ideu preprocesoru Sass jsem, snad, již pochopili v minulém článku. Pojďme si tedy trochu ověřit 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ánki.

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 v SASS

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 v SASS

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 příští lekci si řekneme něco o datových typech v Sass.


 

Stáhnout

Staženo 912x (12.1 kB)
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.
Předchozí článek
Úvod do CSS preprocesoru Sass
Všechny články v sekci
Moderní a profesionální webové portfolio
Miniatura
Následující článek
Datové typy v SASS
Aktivity (2)

 

 

Komentáře
Zobrazit starší komentáře (8)

Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:18.1.2015 15:29

Jojo - pokud chceš mít výsledek div.pomocny tak musíš použít zástupný znak &, což značí rodičovský element.

Odpovědět 18.1.2015 15:29
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
jan.klapuch
Člen
Avatar
Odpovídá na Honza Bittner
jan.klapuch:18.1.2015 15:36

Super, díky :)

 
Odpovědět 18.1.2015 15:36
Avatar
Paula Kalousová:12.4.2016 9:24

Nějak se mi nedaří, už když stáhnu výchozí soubory cvičení 1, a dám style.scss build tak mi to hlasí error - Error: Undefined variable: "$barva-textu".
on line 29 of C:\WEB\cviceni1\sty­le.scss
Už jsem zkoušela zdali Sublime text umí kompilovat ty *.scss styly a to funguje, něco jednoduchého napsat šlo.
Nechápu proč to teda hlásí tu barvu textu když definovaná je. Při tomhle erroru se to nezkompiluje. Díky.

 
Odpovědět  +1 12.4.2016 9:24
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Paula Kalousová
Honza Bittner:12.4.2016 13:51

Koukal jsem na to a opravdu je chyba s danou proměnnou. Problém je v tom, že se v

.grid-1

využívá ta proměnná, ale dosud není definována. Definována je až níže a tudíž k ní není přístup. Stačí tedy, pokud tu část s gridem vložíš na konec souboru.

Děkuji za chybu, později to opravím, ale až po maturitě, teď bohužel není čas. :-)

Odpovědět 12.4.2016 13:51
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na Honza Bittner
Paula Kalousová:12.4.2016 14:06

Díky moc, po letech obnovuji znalosti CSS a HTML, takže mi to už tolik nemyslí :D Přeju hodně štěstí u maturity, ať se vydaří! :)

 
Odpovědět 12.4.2016 14:06
Avatar
Michal Ruml
Člen
Avatar
Michal Ruml:21.8.2016 17:35

Nazdar,

prosím ťa ale ty v scss nikde nemáš tag na zarovnanie inline. Pozerám na to už pol hodiny a nevidím nikde príkaz aby boli <li>-čka zarovnané vodorovne. Chýba ti tam niečo ? :)

 
Odpovědět 21.8.2016 17:35
Avatar
Odpovídá na Michal Ruml
Tyler Hardstone:5.2.2017 18:47

V css to ma vyriesene cez float. Kazda trieda grid ma jedno <li> a v css zadefinovane float: left.

Odpovědět 5.2.2017 18:47
Give me liberty, or give me death
Avatar
Jakub Podskalský:19. května 15:23

Zvládnul jsem v klidu kurz Webové stránky krok za krokem neboli základy HTML & CSS, teď se ale dost ztrácím. Základy Sass v minulém článku jsem sice těžce ještě nějak pobral, tohle cvičení mě ale už zarazilo. Já bych to zvládnul udělat, ale nastavovat to všechno staticky je pitomost. Co jsem pochopil, tak jediná možnost tu je použití gridů, které právě vidím poprvé a pak jsem se leknul jeho loopování (pokud to nazývám správně, mám menší zkušenost v jednom programovacím jazyku). Očekával jsem mezi těmito dvěma kurzy návaznost, ale tenhle kurz chce i něco navíc. Sice na konci základního kurzu bylo doporučeno se ještě kouknout na manuál a prozkoumat víc, ale není to ono jako když člověk vidí reálné využití v projektu. Jakou mám jít tedy cestou? Neudělám chybu, když tohle cvičení zkrátka přeskočím a budu pokračovat v kurzu (pokud mi tedy bude dávat zbytek už větší smysl...)? Nebo se mám jít šprtat dál a vrátit se sem až s lepšími znalostmi než s těmi získanými z kurzu základu?

Editováno 19. května 15:25
 
Odpovědět 19. května 15:23
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Jakub Podskalský
David Čápka:20. května 15:59

Můžeš studovat klidně třeba náš Bootstrap kurz, když ti SASS nevyhovuje, není to majoritní technologie, autor ji použil protože s ní rád pracuje, ale každý je jiný.

Editováno 20. května 15:59
Odpovědět 20. května 15:59
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Odpovídá na David Čápka
Jakub Podskalský:21. května 19:00

Jo, je mi jasné, že možností je nespočetně moc. Spíš jsem byl znepokojen tím cvičením, jeho řešení se převážně skládalo z článků až po něm. Zkusil jsem tedy pokračovat dál a zatím se vše zdá být v pohodě, obzvlášť když se jednalo o téma cyklů, podmínek, funkcí a dalších typických základních věcí programovacího jazyka (s potěšením jsem si řekl "To už znám!"). :D

 
Odpovědět 21. května 19:00
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 10 zpráv z 18. Zobrazit vše