Letní akce Python týden
Pouze tento týden sleva až 80 % na kurzy Python. Lze kombinovat s akcí Letní slevy na prémiový obsah!
Brno? Vypsali jsme pro vás nové termíny školení Základů programování a OOP v Brně!

Lekce 3 - Datové typy v 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.

V minulém článku jsme si osvěžili a vyzkoušeli již nabyté dovednosti ohledně preprocesoru Sass. Nyní si představíme základní datové typy, které budeme v preprocesoru využívat.

Sass obsahuje několik datových typů. My si ukážeme čísla(numbers), textové řetězce(strin­gs), barvy(colors), logickou hodnotu(boole­ans), null, seznamy(lists) a mapy (maps).

Ke každému datovému typu máme k dispozici několik funkcí. Ukážeme si tedy ty, které by se nám mohli hodit nejvíce. Všechny funkce samozřejmě můžete najít na http://sass-lang.com/…nctions.html

Čísla

Číselný datový typ nám umožňuje uchovávat jakékoli reálné číslo. Čísla můžeme zapsat klasicky jako číslo celé, desetinné, zlomek... S čísly můžeme následně provádět matematické operace jako například sčítání, odčítání, násobení a dělení.

Nejpoužívanější funkce

  • percentage($cislo) - vrátí dané číslo převedené na procenta
percentage(0.23) => 23%
percentage(100px / 50px) => 200%
  • round($cislo) - vrátí dané číslo zaokrouhlené k nejbližšímu celému číslu
round(23.4px) => 23px
round(23.6px) => 24px
  • abs($cislo) - vrátí absolutní hodnotu čísla
abs(23px) => 23px
abs(-23px) => 23px
  • min($cislo1, $cislo2, ...) - vrátí nejmenší z předaných čísel
min(7px, 23px) => 7px
min(2em, 23em, 7em) => 2em
  • max($cislo1, $cislo2, ...) - vrátí největší z předaných čísel
min(7px, 23px) => 23px
min(2em, 23em, 7em) => 23em
  • random($limit) - vrátí náhodné číslo, mezi 1(včetně) a $limit(bez)
random(23) => 7
random(23) => 3
random(23) => 11

Příklad 1

Ze seznamu čísel - 7px, 15px, 3px - zjistěte nejmenší číslo. Pokud nejmenším číslem je číslo 3, obarvi text na červeno.

$min: min(7px, 15px, 3px);
@if $min == 3 { color: red }

V podmínce můžeme použít jak 3px, tak i 3.

Textové řetězce

Tento datový typ umožňuje ukládat textové řetězce. Můžeme jej používat ve dvou formách - s uvozovkami či bez uvozovek.

  • Text s uvozovkami, kde můžeme použít jednoduché i dvojité - tedy 'text' i "text".
$a: "ahoj";
$b: 'čau';
  • Pro text bez uvozovek použijeme prostě text.
$c: nazdar;

Textové řetězce můžeme také spojovat pomocí operátoru +.

$d: $a + $b;

Vypisování obsahu proměnných můžeme provést pomocí speciálního zápisu #{ ... }, kde se obsah uvnitř závorek vypíše jako textový řetězec. Můžeme tak např. vložit obsah nějaké proměnné přímo do selektoru jako např. .blok#{$cisloBloku}.

Nejpoužívanější funkce

  • unquote($string) - vrátí nám text bez uvozovek
unquote("libovolný text") => libovolný text
unquote(libovolný text) => libovolný text
  • quote($string) - vrátí nám text s uvozovkami
quote(libovolný text) => "libovolný text"
quote("libovolný text") => "libovolný text"
  • str-length($string) - vrátí nám délku, tedy počet písmen, textového řetězce - počínaje od 1
str-length(text) => 4
  • to-upper-case($string) - vrátí nám string psaný velkým písmem
to-upper-case(libovolný text) => LIBOVOLNÝ TEXT
  • to-lower-case($string) - vrátí nám string psaný malým písmen
to-lower-case(LIBOVOLNÝ TEXT) => libovolný text

Příklad 2

Řekněme tedy, že budeme míti 2 proměnné - jednu s velikostí písma a druhou s výškou řádku. Také budeme chtíti nastavit písmo na např. Arial.

$velikost-pisma: 22px;
$vyska-radku: 30px;
font: $velikost-pisma/$vyska-radku Arial;

Kód zadaný výše s největší pravděpodobností nebude fungovat - tedy tak, jak si představujeme my. Proměnné jsou datového typu čísla, avšak mi potřebujeme textový řetězec. Jak už asi tušíte, čísla se nám vydělí.

22px/30px => 0.73333

My však potřebujeme převést čísla na text, tudíž využijeme #{}. Nezapomeňte napsat každou proměnnou zvlášť, jinak bychom dosáhli stejného výsledku. Správné řešení tedy bude např. takovéto.

font: #{$velikost-pisma}/#{$vyska-radku} Arial;

Příklad 3

Řekněme, že nastane situace, kdy budeme chtíti vytvořit selektor podle nějaké proměnné. V tomto případě použijeme taktéž #{}.

Vytvoříme si tedy proměnnou, která bude obsahovat ku příkladu název třídy, která nám obarví písmo na červeno.

$nazev-tridy: cerveny;
p.#{$nazev-tridy}{
   color: red;
}

Barvy

Dalším bezvadným datovým typem jsou barvy. Ty můžeme zapsat hexadecimálním, rgb/a nebo hsl/a zápisem.

$hexadecimalni: #24fa9e;
$rgba: rgba(210, 73, 19, 0.2);
$hsla: hsla(240, 100%, 50%, 0.5);

S barvami, kromě používání jako normální proměnné, můžeme dělat různé "psí" kusy. Barvy stejného typu můžeme mezi sebou vždy sčítat, odčítat, násobit... Funguje to tak, že se nám barva rozloží na jednotlivé složky barvy, které se navzájem sečtou, odečtou či vynásobí. Tyto operace se dějí samozřejmě v určitém rozsahu, kde pro hexadecimální zápis jest minimum 0 a maximum FF. Pro RGB je pak minimum 0 a maximum 255 a podobně.

Nejpoužívanější funkce

Funkcí, kde se pracuje s barvami, je opravdu mnoho. Tady bych obzvláště doporučovat prohlédnout dokumentaci http://sass-lang.com/…nctions.html

  • darken($barva, $procent) - vrátí nám tmavší barvu ze základu $barva o hodnotu $procent
darken(hsl(25, 100%, 80%), 30%) => hsl(25, 100%, 50%)
darken(#800, 20%) => #200
  • lighten($barva, $procent) - vrátí nám světlejší barvu ze základu $barva o hodnotu $procent
lighten(hsl(0, 0%, 0%), 30%) => hsl(0, 0%, 30%)
lighten(#800, 20%) => #e00
  • opacify($color, $plus) - zvýší nám alfa složku v barvě - méně průhledná
opacify(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.6)
opacify(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 1.0)
  • transparentize($color, $minus) - zmenší nám alfa složku v barvě - více průhledná
transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)

Příklad 4

Zkusíme si sečíst dvě barvy a ukázat si na nich princip operací s barvami. Jak jsem si již říkali, pokud provádíme nějaké operace s barvami, barva se rozdělí na jednotlivé složky, mezi kterými se operace provede. V našem případě - součet - se tedy jednotlivé složky sečtou.

color: #010203 + #040506;
// 01 + 04 => 05
// 02 + 05 => 07
// 03 + 06 => 09
// => #050709

Příklad 5

V dalším příkladu si zkusme barvu vynásobit. Násobit můžeme jak barvou, tak ale i číslem.

color: #010203 * 2;
// 01 * 2 => 02
// 02 * 2 => 04
// 03 * 2 => 06
// => #020406

Seznamy

Datový typ seznam je série hodnot, ke kterým přistupujeme podle určitého indexu - tedy v podstatě pořadí položky. Zapisujeme je jako série hodnot oddělených mezerou nebo čárkou.

Nejpoužívanější funkce

  • length($seznam) - vrátí počet položek v seznamu
length(10px 20px 30px) => 3
length(alfa, beta, gama, delta) => 4
  • nth($seznam, $index) - vrátí hodnotu položky na pozici $index
nth(10px 20px 30px, 2) => 20px
nth((alfa, beta, gama, delta),1) => alfa
  • join($seznam1, $seznam2) - spojí $seznam1 a $seznam2
join((jedna, dva), (alfa, beta)) => jedna, dva, alfa, beta
  • index($seznam, $value) - vrátí pozici položky $value ze seznamu $seznam
index(1px solid red, solid) => 2

Příklad 6

Vytvoříme si dva seznamy - seznam šelem a ptáků. Seznamy následně spojíme do seznamu zvířat.

$selmy: kocka lev lvice medved;
$ptaci: papousek korela andulka sokol orel;
$zvirata: join($selmy, $ptaci);
// $zvirata => kocka lev lvice medved papousek korela andulka sokol orel

Mapy

Mapy jsou datovým typem, který můžete znát pod názvem asociativní pole. Obsahuje hodnoty dostupné podle jejich klíče. Klíče jsou unikátní.

Mapy zapisujeme tak, jak jde vidět na ukázce níže.

$pole: (klic1: hodnota1, klic2: hodnota2, klic3: hodnota3);

Nejpoužívanější funkce

  • map-get($mapa, $klic) - vrátí hodnotu klíče $klic z mapy $mapa
map-get(("alfa": "hodnotaAlfy", "beta": "hodnotaBety"), "alfa") => "hodnotaAlfy"
map-get(("alfa": "hodnotaAlfy", "beta": "hodnotaBety"), "alfaa") => null
  • map-remove($mapa, $klic) - odstraní položku klíče $klic z $mapa
map-remove(("alfa": "hodnotaAlfy", "beta": "hodnotaBety"), "beta") => ("alfa": "hodnotaAlfy")
  • map-keys($mapa) - vrátí seznam klíčů z mapy $mapa
map-keys("alfa": "hodnotaAlfy", "beta": "hodnotaBety") => "alfa", "beta"
  • map-values($mapa) - vrátí seznam hodnot z mapy $mapa
map-values("alfa": "hodnotaAlfy", "beta": "hodnotaBety") => "hodnotaAlfy", "hodnotaBety"
  • map-has-key($mapa, $klic) - vrací, zda je v mapě $mapa klíč $klic
map-has-key(("alfa": "hodnotaAlfy", "beta": "hodnotaBety"), "alfa") => true
map-has-key(("alfa": "hodnotaAlfy", "beta": "hodnotaBety"), "gama") => false

Null

Datový typ null je poměrně zvláštním typem. Využít se dá např. pro volitelné argumenty mixinů či funkcí. Tento datový typ můžeme také využít jako např. výstup funkce, která nám určí, jaká hodnota se má pro danou vlastnost stylu použít - kde se při hodnotě null vlastnost do CSS nevypíše.

Logická hodnota

Logickou hodnota je datový typ, která rozpoznává pravdu a nepravdu - tedy true a false. Využít se dá především při proměnných, jako atribut funkce či mixinu a podobně.

V příštím článku si ukážeme cykly a použití @media.


 

Stáhnout

Staženo 186x (930 B)
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?
15 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
Cykly a @media v SASS
Aktivity (4)

 

 

Komentáře

Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:2.10.2014 17:54

Článek byl přepsán a upraven. :)

Odpovědět 2.10.2014 17:54
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Jakub Štol
Člen
Avatar
Jakub Štol:3.7.2016 8:37

min(7px, 23px) => 23px
OPRAVA: max(7px, 23px) => 23px

Odpovědět  +1 3.7.2016 8:37
Cokoliv si umíš představit, to můžeš mít. Kýmkoliv chceš být, tím se můžeš stát, když chceš.
Avatar
Lucie Fiedlerová:11.9.2017 17:01

Kromě funkce max je ještě třeba opravit:
map-values("alfa": "hodnotaAlfy", "beta": "hodnotaBety") => "alfa", "beta"
OPRAVA: map-values("alfa": "hodnotaAlfy", "beta": "hodnotaBety") => "hodnotaAlfy", "hodnotaBety"

Jinak díky za článek.

 
Odpovědět  +1 11.9.2017 17:01
Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:11.9.2017 17:12

Díky. Opravím.

Odpovědět 11.9.2017 17:12
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
Patrik Pastor:3. března 22:47

Čau, mohl bys mi prosím vysvětlit příklad 2 ? Proč převádíš čísla na stringy, když stringy nejde dělit?, Nechápu :(

 
Odpovědět 3. března 22:47
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Patrik Pastor
Honza Bittner:4. března 12:14

Je to tam popsané, ale zkusím trochu jinak. Když se podíváš na font property, např. na https://www.w3schools.com/…ont_font.asp, tak vidíš, že jedna z syntaxí pro zápis hodnot je s použitím lomítka. (To se občas používá i u jiných vlastností.).

V tomto případně, pokud chceme nastavit vlastnost line-height z vlastnosti font, používá se syntaxe font-size/line-height. Jelikož by se normálním použitím proměnných vynutilo dělení, vkládáme obsah jako string, který nám zaručí, že ve výsledku bude formát jako 15px/22px např.

Jinými slovy:

font: 16px/18px;

je stejné jako

font-size: 16px;
line-height: 18px;

Odpovědět 4. března 12:14
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Jakub Podskalský:19. května 16:28

Zdravím, rád bych upozornil na chybu v článku: ne map-values("alfa": "hodnotaAlfy", "beta": "hodnotaBety") => "alfa", "beta", ale map-values("alfa": "hodnotaAlfy", "beta": "hodnotaBety") => "hodnotaAlfy", "hodnotaBety".
Na tuhle opravu jsi už jednomu komentujícímu nade mnou odepsal, že opravíš... Ale bylo to v roce 2017, takže jsi zřejmě zapomněl. :D Ale stává se, jen upozorňuji, aby to nepletlo nové čtenáře. :)

 
Odpovědět 19. května 16:28
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 7 zpráv z 7.