SCSS a Sass
Odkaz na učebnici
Odkaz na videa na kanálu Hackni svou budoucnost
https://www.youtube.com/playlist?list=PLQ8x_VWW6AksaZf6EGmEdQkDkvRuWe3FW
1. Co je to SCSS
Odkaz na učebnici: https://drive.google.com/file/d/1-dynRnM4KjE8Qm9nUwxgCyGDbsvxSgzO/view?usp=sharing
2. Jak se liší SCSS a SASS
Odkaz na učebnici:
https://drive.google.com/file/d/1_ullcxU2OsJ78GvusVJitBOO3MLjL0g6/view?usp=sharing
3. Učebnice SCSS a Sass
Učebnici najdete na tomto odkazu: http://bit.ly/hackniscss
4. Nastavujeme VS code pro SCSS jazyk
Index.html
Testovací nadpis
Style.SCSS
h1 {
color: red;
}
Style.CSS
h1 {
color: red;
}
/*# sourceMappingURL=style.css.map */
5. Proměnné v SCSS - tvoříme první proměnnou
Style.SCSS
$main-color: red;
h1 {
color: $main-color;
}
p {
background: $main-color;
}
Style.CSS
h1 {
color: red;
}
p {
background: red;
}
/*# sourceMappingURL=style.css.map */
6. Proměnné v SCSS - vytváříme další proměnné
$main-color: red;
$border-color: rgb(209, 14, 79);
$font-size: 35px;
h1 {
color: $main-color;
border: 3px solid $border-color;
font-size: $font-size;
}
p {
background: $main-color;
border: 5px solid $border-color;
font-size: $font-size;
}
7. Proměnné v SCSS - Jak psát správně proměnné v SCSS
// === COLORS ===
$main-color: red;
$border-color: rgb(209, 14, 79);
$secondary-color: blue;
$ternary-color: yellow;
$link-color: $border-color;
// === FONTS ===
$font-size: 35px;
// === SIZES ===
$header-height: 500px;
$footer-height: 400px;
h1 {
color: $main-color;
border: 3px solid $border-color;
font-size: $font-size;
}
p {
background: $main-color;
border: 5px solid $border-color;
font-size: $font-size;
}
/*
1. pojmenování proměnných,
2. uložení jedné proměnné do druhé,
3. rozdělujte proměnné do skupin,
4. používejte komentáře,
5. proměnná pouze jednou? Nevadí
*/
8. Procvičování - vše kolem proměnných
Index.html
Text
Testovací nadpis
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati ullam corrupti culpa fugiat repudiandae dolorum quidem minus iusto explicabo eos nam cumque nisi eaque, provident earum harum debitis aspernatur expedita.
Text text
Style.SCSS
/* === Zadání
Vytvořte proměnné:
- pro hlavní barvu,
- pro méně důležitou barvu,
- pro barvu používanou jen zřídka,
- pro výšku hlavičky,
- pro výšku patičky
- pro velikost psíma
Rozdělte vše do skupin a okomentujte
Všechny proměnné použijte podle libosti
*/
// === COLORS ===
$main-color: blue;
$secondary-color: yellow;
$ternary-color: red;
// === SIZES ===
$header-height: 180px;
$footer-height: 220px;
// === FONTS ===
$font-size: 35px;
h1, p {
font-size: $font-size;
}
h1 {
color: $main-color;
background: $secondary-color;
}
p {
color: $ternary-color;
}
header {
height: $header-height;
}
footer {
height: $footer-height;
}
9. Partials - rozdělujeme kód do více souborů
Vytvořte nový soubor _variables.scss
_variables.SCSS - vložte do něj veškeré proměnné
// === COLORS ===
$main-color: blue;
$secondary-color: yellow;
$ternary-color: red;
// === SIZES ===
$header-height: 180px;
$footer-height: 220px;
// === FONTS ===
$font-size: 35px;
Style.SCSS - naimportujte soubor s proměnnými
@import "variables";
body {
background: $secondary-color;
}
10. Hledáme chyby v konzoli
Zkuste si tyto chyby a podívejte se, jak jsou vypisovány do konzole
Chyba - chybějící středník
$footer-height: 220px
Chyba - chybějící znak dolaru ($) před proměnnou
header-height: 180px;
Chyba - chybějící “i” ve slově import
@mport "variables";
11. Mixiny - co to je a jak je používat
Index.html
Můžeš kliknout
Můžeš kliknout
Style.SCSS - tvorba mixiny s názvem myButton
@mixin myButton {
background-color: orange;
color: #fff;
}
Style.SCSS - použití mixiny
.alert-button {
@include myButton;
padding: 5px 10px;
}
.bigger-button {
@include myButton;
padding: 10px 15px;
}
Style.CSS
.alert-button {
background-color: orange;
color: #fff;
padding: 5px 10px;
}
.bigger-button {
background-color: orange;
color: #fff;
padding: 10px 15px;
}
12. Partials pro mixiny
Vytvoříme nový soubor _mixins.scss
_mixins.SCSS - vložíme do něj mixinu z předchozího videa
@mixin myButton {
background-color: orange;
color: #fff;
}
Style.SCSS - nesmíme zapomenout soubor napojit do style.scss
@import "variables";
@import "mixins";
13. Procvičování - procvičujeme mixiny
Zadání
/* Vytvoříme mixinu, která bude zahrnovat: font-family, text-align, color a bude se jmenovat textStyle. Použijeme ji na odstavce (přidejte si do stránky více odstavců) a na nadpis h1. Odstavec bude mít velikost písma 18px a h1 velikost 35px */
Index.html
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio fuga dolor impedit facilis maxime corrupti quasi, veritatis error cum repudiandae libero laudantium reprehenderit nobis, quia voluptas et! Inventore, dolores pariatur.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio fuga dolor impedit facilis maxime corrupti quasi, veritatis error cum repudiandae libero laudantium reprehenderit nobis, quia voluptas et! Inventore, dolores pariatur.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio fuga dolor impedit facilis maxime corrupti quasi, veritatis error cum repudiandae libero laudantium reprehenderit nobis, quia voluptas et! Inventore, dolores pariatur.
_mixins.SCSS
@mixin textStyle {
font-family: Arial, Helvetica, sans-serif;
color: rgb(133, 45, 45);
text-align: center;
}
Style.SCSS
p {
@include textStyle;
font-size: 18px;
}
h1 {
@include textStyle;
font-size: 35px;
}
14. Mixiny - další možný zápis v mixině
_mixins.scss
@mixin big-text {
font: {
size: 30px;
weight: bold;
family: Verdana;
}
}
Style.SCSS
h2 {
@include big-text;
}
Style.CSS
h2 {
font-size: 30px;
font-weight: bold;
font-family: Verdana;
}
15. Mixiny - vkládání mixin do sebe
Index.html
_mixins.scss
@mixin rounded {
border-radius: 15px;
}
@mixin myButton {
@include rounded;
background-color: orange;
color: #fff;
}
@mixin image {
@include rounded;
width: 300px;
}
Style.SCSS
img {
@include image;
}
16. Mixiny - Všeobecná mixina
_mixins.scss
@mixin our-links {
a {
font-style: italic;
text-decoration: none;
color: $ternary-color;
}
}
Style.SCSS
@include our-links;
Style.CSS
a {
font-style: italic;
text-decoration: none;
color: red;
}
17. Mixiny - mixina s argumentem
_mixins.SCSS
@mixin rounded($radius) {
border-radius: $radius;
}
Style.SCSS
img {
@include image;
@include rounded(20px);
}
_mixins.SCSS - vložili jsme mixinu rounded s hodnotou 15px do mixiny myButton, která je použita v souboru style.scss u tlačítek
@mixin myButton {
@include rounded(15px);
background-color: orange;
color: #fff;
}
18. Mixiny - mixina s defaultní (výchozí) hodnotou
_mixins.scss
@mixin rounded($radius: 15px) {
border-radius: $radius;
}
Style.SCSS
img {
@include image;
@include rounded;
}
Style.CSS
img {
width: 300px;
border-radius: 15px;
}
19. Mixiny - mixina a více argumentů
_mixins.SCSS
@mixin rounded($radius: 15px, $border: 2px solid green) {
border-radius: $radius;
border: $border;
}
style.SCSS
img {
@include image;
@include rounded(25px, 2px solid red);
}
style.CSS
img {
width: 300px;
border-radius: 25px;
border: 2px solid red;
}
20. Mixiny - mixina a pořadí argumentů
Pokud zadáváte druhý argument, ale první nechcete, tak ho musíte pojmenovat. Tím dáte najevo, že zadáváte ten druhý a u prvního má vzít výchozí hodnotu.
img {
@include image;
@include rounded($border: 2px solid red);
}
21. Mixiny - mixina s jedním argumentem a více hodnotami (vararg)
_mixins.scss
@mixin shadow($shadows...){
box-shadow: $shadows;
}
Style.SCSS
img {
@include image;
@include rounded($border: 2px solid red);
@include shadow(5px 5px 10px green, 10px 10px 10px blue, 15px 15px 15px orange)
}
Style.CSS
img {
width: 300px;
border-radius: 15px;
border: 2px solid red;
-webkit-box-shadow: 5px 5px 10px green, 10px 10px 10px blue, 15px 15px 15px orange;
box-shadow: 5px 5px 10px green, 10px 10px 10px blue, 15px 15px 15px orange;
}
22. Import - jak správně na importy v SCSS (Sass)
Vytvoříme novou složku partials a přetáhneme tam _mixins.scss a _variables.scss
Style.SCSS
Zde musíme změnit cestu naimportovaných souborů
@import "partials/variables";
@import "partials/mixins";
Další typy souborů, které se moc často nevyužívají
@import url(); // Například import fontu
@import "http://"; // importujeme něco z url adresy
@import "nazevSouboru.scss"; // i jiné soubory než scss
@import "style-screen" screen; // např. pro importování query
23. Nesting - co to je
Index.html
Style.SCSS
// === Klasická CSS ===
// .first-list {
// font-size: 23px;
// }
// .first-list li {
// color: blue;
// }
// === Nesting (přepsaná CSS nahoře) ===
.first-list {
font-size: 23px;
li {
color: blue;
}
}
Style.CSS
.first-list {
font-size: 23px;
}
.first-list li {
color: blue;
}
24. Nesting - procvičení nestingu
Index.html
- Sešit
- Tužka
- Kružítko
25. Nesting - nesting a hover (& v SCSS a Sass)
Index.html
Lorem ipsum dolor sit, amet consectetur adipisicing Toto je odkaz elit. Impedit, nemo odio unde provident iusto odit magnam inventore soluta Toto je odkaz debitis placeat quisquam harum ut cupiditate distinctio enim consectetur dignissimos ratione dolor.
26. Funkce - Co jsou to funkce
V CSS používáme různé zápisy barev. Jeden z nich je pomocí rgb. Může vypadat např. takto:
color: rgb(35, 35, 199);
Co dělá rgb? Do rgb pošlete čísla - množství červené barvy (r = red), množství zelené barvy (g = green) a množství modré barvy (b = blue). My jsme dali 80 množství červené, 220 množství zelené a 180 množství modré (množství může být vždy od 0 do 255).
To, na co se zde díváme, je funkce. Tato funkce se jmenuje rgb a poslali jsme do ní hodnoty. A tato funkce nám vrátí konkrétní barvu. A přesně tím jsou specifické funkce:
27. Funkce - darken a lighten (přednastavené funkce v SCSS)
Style.SCSS
Pro ztmavení používáme funkci darken
a {
color: red;
text-decoration: none;
font-size: 18px;
&:hover {
color: darken(rgb(11, 11, 190), 30%);
}
}
Style.SCSS
Pro zesvětlení používáme funkci lighten
a {
color: red;
text-decoration: none;
font-size: 18px;
&:hover {
color: lighten($main-color, 10%);
}
}
28. Funkce - transparentize (přednastavené funkce v SCSS)
Style.SCSS
Pro průhlednost používáme přednastavenou funkci transparentize
a {
color: red;
text-decoration: none;
font-size: 18px;
border-bottom: 2px solid transparentize(orange, 0.5);
&:hover {
color: darken(rgb(11, 11, 190), 30%);
}
}
29. Funkce - vlastní funkce a jak je zapsat
Vytvoříme si ve složce partials nový soubor _functions.scss. Do něj budeme vkládat naše vytvořené funkce.
Style.SCSS
@import "partials/variables";
@import "partials/mixins";
@import "partials/functions";
_functions.SCSS
@function sum($number1, $number2){
@return $number1 + $number2;
}
Style.SCSS
.bigger-button {
@include myButton;
padding: 10px 15px;
font-size: sum(15px, 2px);
}
30. Funkce - praktičtější příklad vlastní funkce
_functions.SCSS
@function em($pixels, $basicValue: 16px){
@return ($pixels / $basicValue) * 1em;
}
Style.SCSS
body {
background: $secondary-color;
font-size: 16px;
}
Style.SCSS
.bigger-button {
@include myButton;
padding: em(10px) em(15px);
font-size: 1em;
}
31. Dědění - extend
Index.html
Přidáme si dva odstavce s odlišnými classami
Toto je pouze upozornění
Chybová hláška
Style.SCSS
Klásu error-notification rozšíříme o všechny vlastnosti normal-notification
.normal-notification {
color: white;
font-size: 20px;
background: red;
width: 220px;
text-align: center;
}
.error-notification {
@extend .normal-notification;
border: 5px solid blue;
}
Style.CSS
Takto vypadá výsledek v klasických CSS
.normal-notification, .error-notification {
color: white;
font-size: 20px;
background: red;
width: 220px;
text-align: center;
}
.error-notification {
border: 5px solid blue;
}
32. Dědění - extend v media query
Style.SCSS
Pokud chceme vrámci media query rozšířit jednu klásu o druhou, tak tato druhá klása musí být uvnitř celého query. Takto je to zapsané správně a bude to fungovat.
@media only screen {
.test-class {
color: blue;
}
.another-class {
@extend .test-class;
font-size: 30px;
}
}
Style.SCSS
Takto by nám to bohužel nefungovalo. Klása test-class je mimo query.
.test-class {
color: blue;
}
@media only screen {
.another-class {
@extend .test-class;
font-size: 30px;
}
}
33. Dědění - extend a negenerovaný obsah SCSS do CSS (tzv. extend-only)
Style.SCSS
Pokud potřebujeme mít v kódu část, kterou nechceme přegenrovat do klasického CSS, tak stačí před název napsat znak procent (%).
%test-only {
font-style: italic;
}
.sub-title {
@extend %test-only;
font-size: 28px;
}
Style.CSS
V klasických stylech vidíme, že žádné test-only v nich není
.sub-title {
font-style: italic;
}
.sub-title {
font-size: 28px;
}
34. Dědění - extend pro neexistující classu
Style.SCSS
Co když klásu new-class rozšíříme o klásu, která neexistuje? Co se stane? Vyhodí nám to chybu. Takový chybový zápis by vypadal takto.
.new-class {
@extend .dont-exists;
font-size: 45px;
}
Style.SCSS
Pokud ale za klásu napíšeme !optional, tak to znamená, že pokud klása existuje, tak se má použít a pokud neexistuje, tak se má jít normálně dál. Žádnou chybu nám to nevyhodí.
.new-class {
@extend .dont-exists !optional;
font-size: 45px;
}
35. Dědění - extend VS mixins
Extend generuje více selektorů, ale negeneruje zduplikovaný kód.
.normal-notification, .error-notification {
color: white;
font-size: 20px;
background: red;
width: 220px;
text-align: center;
}
Mixiny mohou v určitých případech generovat více duplicitního kódu. Protože jednu mixinu použiji na více místech = duplikovaný kód.
36. Podmínky - if a else v SCSS (Sass)
Style.SCSS
Podmínky se označují slovem if. Musí být ale před ním zavináč. Poté následuje podmínka a pokud je podmínka pravdivá, tak se provede část v prvních složených závorkách (v našem případě bude font-size 12 pixelů). Pokud podmínka není pravdivá, tak se provede část v druhých složených závorkách (v našem případě by bylo font-size 20 pixelů).
$font-size: big;
body {
background: $secondary-color;
@if $font-size == small {
font-size: 12px;
} @else {
font-size: 20px;
}
}
37. Podmínky - if, else, else if
Style.SCSS
Pokud může podmínka nabývat více hodnot (např. small, normal a big), tak se nám bude hodit použití @else if, které je následované podmínkou. Pokud má proměnné $font-size hodnotu small, tak bude font-size 12 pixelů. Pokud má hodnotu normal, tak bude mít font-size hodnotu 16 pixelů. A pokud je big, tak 20 pixelů.
// Font-size může mít hodnoty: small, normal a big
$font-size: big;
body {
background: $secondary-color;
@if $font-size == small {
font-size: 12px;
} @else if $font-size == normal {
font-size: 16px;
} @else if $font-size == big {
font-size: 20px;
}
}
38. Podmínky - vytváříme dark, light a normal verzi stránek pomocí podmínky
_variables.scss
// Theme: light, dark, normal
$theme: dark;
// === COLORS ===
$main-color: blue;
$secondary-color: yellow;
$ternary-color: red;
$text-color: black;
// === SIZES ===
$header-height: 180px;
$footer-height: 220px;
// === FONTS ===
$font-size: 35px;
@if $theme == dark {
$secondary-color: black;
$text-color: #fff;
} @else if $theme == light {
$secondary-color: #fff;
}
39. Podmínky a mixiny - měníme stránky přepsáním jedné proměnné
_variables.SCSS
// Značka (brand): pizza, coffee
// Pizza bude chtít podtržené nadpisy
// Kavárna bude chtít jinou hnědou barvu odkazů
$brand: pizza;
_mixins.scss
@mixin pizza {
@if $brand == pizza {
@content;
}
}
@mixin coffee {
@if $brand == coffee {
@content;
}
}
Style.SCSS
h2 {
@include big-text;
@include pizza {
text-decoration: underline;
}
}
Style.SCSS
h2 {
@include big-text;
@include pizza {
text-decoration: underline;
}
}
Style.SCSS
a {
text-decoration: none;
font-size: 19px;
border-bottom: 2px solid transparentize(orange, 0.5);
@include coffee {
color: rgb(201, 128, 19);
}
&:hover {
color: darken(rgb(11, 11, 190), 30%);
}
}
40. Matematika v SCSS - matematické operace
Index.html
Style.SCSS
.result {
font-size: $math-results;
}
_variables.scss - sčítání
$math-results: 3px + 4px;
// výsledek je 7px
_variables.scss - odčítání
$math-results: 6px - 4px;
// výsledek je 2px
_variables.scss - násobení - POZOR
$math-results: 6px * 4px;
// toto není podporovaná operace!
_variables.scss - správné násobení
$math-results: 6px * 4;
// výsledek je 24px
Jak využít násobení
$math-results: 6px * 4px / 3px;
// výsledek je 8px
// 6px * 4px vrátí 24px * px
// 24px * px / 3px = 24px/3 * px/px = 8px * 1 = 8px
Kompatibilní jednotky
$math-results: 1in - 6px;
// výsledek je 0.9375in
(Palec je v ČR - 26,3 mm)
Nekompatibitlní jednotky
$math-results: 1em - 6px;
// vyhodí chybu - nekompatibilní jednotky
Špatné dělení
$math-results: 8px / 4px;
// nevyhodí chybu, ale výsledek je pouze 2
Jak správně dělit
$math-results: 8px / 4;
// výsledek je 2px
41. Matematika v SCSS - matematika a barvy
Index.html - přepíšeme font-size na color
.result {
color: $math-results;
}
_variables.scss
Zde je pár příkladů. Nejde o výsledek, ale o to, jaký je princip
$math-results: #333 + #777;
// výsledek je #aaaaaa
// podívat se na paletu barev, jak se barvy posunula
$math-results: #090807 - #030201;
// výsledek je #060606
// podívat se na paletu barev, jak se barvy posunula
$math-results: #123465 * 2;
// výsledek je #2468ca
$math-results: #222 * #040404;
// výsledek je ##888888
$math-results: #888888 / 2;
// výsledek je #444444
42. Cykly - cyklus for v SCSS a Sass
Style.SCSS
@for $i from 1 through 6 {
.col-#{$i} {
width: $i * 5em;
}
}
Style.CSS
.col-1 {
width: 5em;
}
.col-2 {
width: 10em;
}
.col-3 {
width: 15em;
}
.col-4 {
width: 20em;
}
.col-5 {
width: 25em;
}
.col-6 {
width: 30em;
}
Style.SCSS
Pokud místo slova through napíšeme to, tak se cyklus provede pouze 5x (od 1 do 5)
@for $i from 1 to 6 {
.col-#{$i} {
width: $i * 5em;
}
}
Style.CSS
.col-1 {
width: 5em;
}
.col-2 {
width: 10em;
}
.col-3 {
width: 15em;
}
.col-4 {
width: 20em;
}
.col-5 {
width: 25em;
}
43. Cykly - cyklus each a list
Style.SCSS
// === Each cyklus ===
// List
$students: david, harry, ron, hermiona;
@each $one-student in $students {
.#{$one-student}-profile {
background-image: url("img/#{$one-student}.png");
}
}
Style.CSS
.david-profile {
background-image: url("img/david.png");
}
.harry-profile {
background-image: url("img/harry.png");
}
.ron-profile {
background-image: url("img/ron.png");
}
.hermiona-profile {
background-image: url("img/hermiona.png");
}
44. Cykly - cyklus each a map
Style.SCSS
// Map
$font-size: (very-small: 7px, small: 10px, medium: 15px, large: 20px);
@each $name, $size in $font-size {
.#{$name} {
font-size: $size;
}
}
Style.CSS
.very-small {
font-size: 7px;
}
.small {
font-size: 10px;
}
.medium {
font-size: 15px;
}
.large {
font-size: 20px;
}
45. Cykly - cyklus while a pozor na nekonečný cyklus
Style.SCSS
// === While cyklus ===
$j: 1;
@while $j <= 4 {
.picture-#{$j} {
width: $j * 10%;
}
$j: $j + 1;
}
$k: 8;
@while $k >= 1 {
.picture-#{$k} {
width: $k * 10%;
height: 300px;
}
$k: $k - 1;
}
Jdeme tvořit vlastní stránky v SCSS
46. Příprava projektu a stažení obrázků
Ve VS code (popř. v jiném editoru) si vytvoříme:
- index.html,
- style.scss,
- složku img.
Do index.html vložíme běžnou strukturu a propojíme ho se style.css (ty ještě v tuto chvíli nemáme vytvořené).
Do složky img uložíme 4 obrázky, které si můžete stáhnout zde:
Klikneme dole na liště na Watch Sass a style.css by se nám měl vytvořit (style.css.map můžete ignorovat, ale nemažeme ho).
Struktura bude vypadat takto (Thumbs.db se vám občas vytvoří jako pomocný soubor, ale nepotřebujeme ho):
47. Tvorba HTML
Index.html
David´s Design
O společnosti David´s Design
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, non porro! Laudantium accusantium eos cupiditate voluptas ullam. Illum, ut, ipsum iste sapiente tenetur blanditiis deleniti doloribus, reprehenderit voluptatibus corrupti officia.
Aperiam in officia reiciendis fugiat! Vel laudantium quo accusamus! Nesciunt, ratione molestiae. Qui debitis optio consequatur at dolor necessitatibus amet reprehenderit sunt delectus, placeat ex beatae praesentium iusto nulla quia?
Velit in rerum nisi recusandae deleniti, nihil nemo veniam, aut mollitia facere quod omnis voluptates consequuntur nesciunt sed ipsam labore accusantium maxime, repudiandae reprehenderit dolor perferendis animi. Rerum, numquam impedit
© David Šetek 2021, Všechna práva vyhrazena
48. Body, partials, mixins, variables
Založte si ve složce partials dva soubory. První bude _mixins.scss a druhý bude _variables.scss
Style.SCSS
@import "partials/variables";
@import "partials/mixins";
body {
background-color: $body-background;
@include container;
}
_mixins.SCSS
@mixin container {
width: 1200px;
margin: 0 auto;
}
_variables.SCSS
// === COLORS ===
$body-background: #fff;
49. Stylujeme hlavičku a patičku pomocí SCSS
Style.SCSS
header {
height: $header-height;
@include header-footer-style;
h1 {
margin-top: 0;
line-height: $header-height;
}
}
footer {
height: $footer-height;
@include header-footer-style;
p {
line-height: $footer-height;
}
}
_mixins.SCSS
@mixin header-footer-style {
background: $header-footer-background;
color: $text-head-foot-color;
text-align: center;
}
_variables.SCSS
// === COLORS ===
$body-background: #fff;
$header-footer-background: rgb(75, 15, 60);
$text-head-foot-color: #fff;
// === SIZES ===
$header-height: 50px;
$footer-height: 50px;
50. Stylujeme sekci about us
Style.SCSS
.about-us {
h2, p {
color: $text-color;
}
}
_variables.SCSS
$text-color: black;
51. Tvoříme funkci pro vícesloupcový layout (grid)
Založte si nový soubor _functions.SCSS ve složce partials
_functions.SCSS
@function col-width($columns: 12, $page-width: 100%, $gap: 0.1%){
@return ($page-width - $gap*($columns - 1)) / $columns;
}
_mixins.SCSS
@mixin theme-box {
width: 6 * col-width();
}
Style.SCSS
.theme {
@include theme-box;
display: inline-block;
}
52. Stylujeme obrázky a odkazy
Style.SCSS
.theme {
@include theme-box;
display: inline-block;
img {
width: 70%;
display: block;
margin: 0 auto;
@include my-border-radius;
}
a {
text-align: center;
display: block;
width: 100px;
margin: 10px auto;
@include button;
}
}
_mixins.scss
@mixin button {
text-decoration: none;
background: $header-footer-background;
color: #fff;
padding: 10px 15px;
border: $ordinary-border;
@include my-border-radius;
}
_variables.SCSS
// === COLORS ===
$body-background: #fff;
$header-footer-background: rgb(75, 15, 60);
$text-head-foot-color: #fff;
$text-color: black;
$ordinary-border: 2px solid black;
53. Přidáváme hover na tlačítko pomocí SCSS
Style.SCSS
a {
text-align: center;
display: block;
width: 100px;
margin: 10px auto;
@include button;
&:hover {
background: lighten($header-footer-background, 10%);
}
}
54. Tvoříme dark a light verzi webu
_variables.SCSS
// Theme: light, dark
$theme: dark;
// For LIGTH theme
// === COLORS ===
$body-background: #fff;
$header-footer-background: rgb(75, 15, 60);
$text-head-foot-color: #fff;
$text-color: black;
$ordinary-border: 2px solid black;
// === SIZES ===
$header-height: 50px;
$footer-height: 50px;
// For DARK theme
@if $theme == dark {
$body-background: black;
$text-color: white;
$ordinary-border: 2px solid white;
$header-footer-background: darken(rgb(75, 15, 60), 5%);
$header-height: 80px;
$footer-height: 80px;
}
Kód celé stránky ke stažení
Kód celé stránky ke stažení zde:
