Lekce 3 - Datové typy v SASS

V předešlém cvičení, Řešené úlohy k úvodu do CSS preprocesoru SASS, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

Dnes 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ě.

Pro dnešek to bude vše.

V další lekci, Cykly a @media v SASS, si vysvětlíme cykly a ukážeme si jejich využití na praktických příkladech. Naučíme se taky využívat @media.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.