C# týden Slevový týden - Červenec
30 % bodů zdarma na online výuku díky naší Slevové akci!
Pouze tento týden sleva až 80 % na e-learning týkající se C#

Ř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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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


 

Stáhnout

Staženo 1017x (12.1 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Úvod do CSS preprocesoru Sass
Všechny články v sekci
Moderní a profesionální webové portfolio
Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
11 hlasů
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity (3)

 

 

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

Avatar
jan.klapuch
Člen
Avatar
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
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
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
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.5.2019 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.5.2019 15:25
 
Odpovědět
19.5.2019 15:23
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Jakub Podskalský
David Čápka:20.5.2019 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.5.2019 15:59
Odpovědět
20.5.2019 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.5.2019 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.5.2019 19:00
Avatar
Odpovídá na Jakub Podskalský
Jindřich Pšeničný:6. června 7:40

jo, tohle mi taky vadí. Pokud se začátečník jako já učí postupně jednu lekci po druhé podle tutoriálů a potom autor zadá cvičení které je postavené na prvcích-znalostech které ještě nebyli vysvětlené, tak nemá šanci a celé cvičení ztrácí smysl. Jsem rád, že sem ty tutoriály dáváte, ale prosil bych autory, aby brali ohled i na začátečníky.

 
Odpovědět
6. června 7:40
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 19. Zobrazit vše