Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Cvičení k úvodu do CSS preprocesoru SASS

HTML a CSS Moderní a profesionální webové portfolio Cvičení k úvodu do CSS preprocesoru SASS

Unicorn College ONEbit hosting 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 níže.

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íti velikost 1/6 a jméno uprostřed 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ž to celé 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 budeme muset vytvořit nějaký div.obsah, kde bude všechno. V něm budeme mít obrázek, nadpis h1, pár odstavců s popiskem 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ím článku si řekneme něco o datových typech.


 

Stáhnout

Staženo 619x (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?
7 hlasů
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/ama.
Miniatura
Předchozí článek
Úvod do CSS preprocesoru Sass
Miniatura
Následující článek
Datové typy v SASS
Aktivity (1)

 

 

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

Avatar
jan.klapuch
Člen
Avatar
jan.klapuch:18.1.2015 12:01

Asi na to kašlu, nejsem schopen to rozchodit. Zkusil jsem to dá i na net, kdyby ses chtěl podívat. http://jsfiddle.net/tf9ee2hq/

 
Odpovědět 18.1.2015 12:01
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na jan.klapuch
Honza Bittner:18.1.2015 12:38

Měl jsi to zabalené ve zvláštním divu, což ti efekt samozřejmě vyrušilo...
http://jsfiddle.net/tf9ee2hq/1/

Odpovědět 18.1.2015 12:38
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
jan.klapuch
Člen
Avatar
Odpovídá na Honza Bittner
jan.klapuch:18.1.2015 14:49

Ten div element jsem tam původně neměl, pak jsem ho přidal kvůli tomu, že se mi neukazovalo ani ohraničení elementu. Když u mého fiddle odstraníš ten element, tak to nepomůže. Díky tvé verzi jsem ale mohl najít skutečný problém: Ve SCSS file sem udělal toto:

div {
  .pomocny {
    ...
  }
  .element {
    ...
  }
}

compilace vytvořila

div .pomocny

Důležitá je tam ta mezera, která způsobí, že to nefunguje. Díky moc ;)

 
Odpovědět 18.1.2015 14:49
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na jan.klapuch
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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
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
Redaktor
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. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
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. února 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. února 18:47
Give me liberty, or give me death
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 15. Zobrazit vše