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

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 523x (12.1 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

  Aktivity (1)

Článek pro vás napsal Honza Bittner
Avatar
Autor je vášnivý web developer. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (6 hlasů) :
4.666674.666674.666674.666674.66667


 


Miniatura
Předchozí článek
Úvod do CSS preprocesoru Sass
Miniatura
Následující článek
Datové typy v SASS

 

 

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

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:
<body>

<div class="pomocny"></div>
<div class="element">
  <p>I'm 18 years old</p>
</div>

</body>

Takto - ten pomocný div ti určuje střed pro vertical-align...

Odpovědět 18.1.2015 11:01
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
jan.klapuch
Člen
Avatar
Odpovídá na Honza Bittner
jan.klapuch:

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:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
jan.klapuch
Člen
Avatar
Odpovídá na Honza Bittner
jan.klapuch:

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:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Paula Kalousová:

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. dubna 9:24
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Paula Kalousová
Honza Bittner:

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. dubna 13:51
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Paula Kalousová:

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. dubna 14:06
Avatar
Michal Ruml
Člen
Avatar
Michal Ruml:

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. srpna 17:35
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 14. Zobrazit vše