3. diel - Dátové typy v SASS

V predchádzajúcom cvičení, Cvičenie na úvod do CSS preprocesora SASS, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V minulom článku sme si osviežili a vyskúšali už nadobudnuté zručnosti ohľadom preprocesoru Sass. Teraz si predstavíme základné dátové typy, ktoré budeme v preprocesoru využívať.

Sass obsahuje niekoľko dátových typov. My si ukážeme čísla (numbers), textové reťazce (strings), farby (colors), logickú hodnotu (booleans), null, zoznamy (lists) a mapy (maps).

Ku každému dátovému typu máme k dispozícii niekoľko funkcií. Ukážeme si teda tie, ktoré by sa nám mohli hodiť najviac. Všetky funkcie samozrejme môžete nájsť na http://sass-lang.com/...nctions.html

Čísla

Číselný dátový typ nám umožňuje uchovávať akékoľvek reálne číslo. Čísla môžeme zapísať klasicky ako číslo celé, desatinné, zlomok ... S číslami môžeme následne vykonávať matematické operácie ako napríklad sčítanie, odčítanie, násobenie a delenie.

Najpoužívanejšie funkcie

• percentage($cislo) - vráti danej číslo prevedené na percentá

percentage(0.23) => 23%
percentage(100px / 50px) => 200%

• round($cislo) - vráti danej číslo zaokrúhlené k najbližšiemu celému číslu

round(23.4px) => 23px
round(23.6px) => 24px

• abs($cislo) - vráti absolútnu hodnotu čísla

abs(23px) => 23px
abs(-23px) => 23px

• min($cislo1, $cislo2, ...) - vráti najmenší z odovzdaných čísel

min(7px, 23px) => 7px
min(2em, 23em, 7em) => 2em

• max($cislo1, $cislo2, ...) - vráti najväčší z odovzdaných čísel

min(7px, 23px) => 23px
min(2em, 23em, 7em) => 23em

• random($limit) - vráti náhodné číslo, medzi 1 (vrátane) a $ limit (bez)

random(23) => 7
random(23) => 3
random(23) => 11

Príklad 1

Zo zoznamu čísel - 7px, 15px, 3px - zistite najmenšie číslo. Ak najmenším číslom je číslo 3, Odfarbi text na červeno.

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

*V podmienke môžeme použiť ako 3px, tak i **3.***

Textové reťazce

Tento dátový typ umožňuje ukladať textové reťazce. Môžeme ho používať v dvoch formách - s úvodzovkami či bez úvodzoviek.

• Text s úvodzovkami, kde môžeme použiť jednoduché i dvojité - teda 'text' aj "text".

$a: "ahoj";
$b: 'čau';

• Pre text bez úvodzoviek použijeme jednoducho text.

$c: nazdar;

Textové reťazce môžeme tiež spájať pomocou operátora +.

$d: $a + $b;

Vypisovanie obsahu premenných môžeme vykonať pomocou špeciálneho zápisu #{ ... }, kde sa obsah vnútri zátvoriek vypíše ako textový reťazec. Môžeme tak napr. Vložiť obsah nejaké premenné priamo do selektora ako napr. .blok#{$cisloBloku}.

Najpoužívanejšie funkcie

• unquote($string) - vráti nám text bez úvodzoviek

unquote("libovolný text") => libovolný text
unquote(libovolný text) => libovolný text

• quote($string) - vráti nám text s úvodzovkami

quote(libovolný text) => "libovolný text"
quote("libovolný text") => "libovolný text"

• str-length($string) - vráti nám dĺžku, teda počet písmen, textového reťazca - počnúc od 1

str-length(text) => 4

• to-upper-case($string) - vráti nám string písaný veľkým písmom

to-upper-case(libovolný text) => LIBOVOLNÝ TEXT

• to-lower-case($string) - vráti nám string písaný malým písmen

to-lower-case(LIBOVOLNÝ TEXT) => libovolný text

Príklad 2

Povedzme teda, že budeme mať 2 premenné - jednu s veľkosťou písma a druhú s výškou riadku. Tiež budeme chcieť nastaviť písmo na napr. Arial.

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

Kód zadaný vyššie s najväčšou pravdepodobnosťou nebude fungovať - teda tak, ako si predstavujeme my. Premenné sú dátového typu čísla, avšak mi potrebujeme textový reťazec. Ako už asi tušíte, čísla sa nám vydelí.

22px/30px => 0.73333

My však potrebujeme previesť čísla na text, teda využijeme #{}. Nezabudnite napísať každú premennú zvlášť, inak by sme dosiahli rovnaký výsledok. Správne riešenie teda bude napr. Takejto.

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

Príklad 3

Povedzme, že nastane situácia, kedy budeme chcieť vytvoriť selektor podľa nejaké premenné. V tomto prípade použijeme taktiež #{}.

Vytvoríme si teda premennú, ktorá bude obsahovať ku príkladu názov triedy, ktorá nám zafarbia písmo na červeno.

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

Farby

Ďalším bezchybným dátovým typom sú farby. Tie môžeme zapísať hexadecimálnom, rgb / a alebo HSL / a zápisom.

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

S farbami, okrem používania ako normálne premenné, môžeme robiť rôzne "psie" kusy. Farby rovnakého typu môžeme medzi sebou vždy sčítať, odčítať, násobiť ... Funguje to tak, že sa nám farba rozloží na jednotlivé zložky farby, ktoré sa navzájom sčítajú, odpočítajú či vynásobí. Tieto operácie sa dejú samozrejme v určitom rozsahu, kde pre hexadecimálne zápis jest minimum 0 a maximum FF. Pre RGB je potom minimum 0 a maximum 255 a podobne.

Najpoužívanejšie funkcie

Funkciou, kde sa pracuje s farbami, je naozaj veľa. Tu by som obzvlášť odporúčať prehliadnuť dokumentáciu http://sass-lang.com/...nctions.html

• darken($barva, $procent) - vráti nám tmavšiu farbu zo základu $ farba o hodnotu $ percent

darken(hsl(25, 100%, 80%), 30%) => hsl(25, 100%, 50%)
darken(#800, 20%) => #200

• lighten($barva, $procent) - vráti nám svetlejšiu farbu zo základu $ farba o hodnotu $ percent

lighten(hsl(0, 0%, 0%), 30%) => hsl(0, 0%, 30%)
lighten(#800, 20%) => #e00

• opacify($color, $plus) - zvýši nám alfa zložku vo farbe - menej priehľadná

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 zložku vo farbe - viac priehľadná

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)

Príklad 4

Skúsime si sčítať dve farby a ukázať si na nich princíp operácií s farbami. Ako som si už hovorili, ak vykonávame nejaké operácie s farbami, farba sa rozdelí na jednotlivé zložky, medzi ktorými sa operácia vykoná. V našom prípade - súčet - sa teda jednotlivé zložky spočítajú.

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

Príklad 5

V ďalšom príklade si skúsme farbu vynásobiť. Násobiť môžeme ako farbou, tak ale aj číslom.

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

Zoznamy

Dátový typ zoznam je séria hodnôt, ku ktorým pristupujeme podľa určitého indexu - teda v podstate poradí položky. Zapisujeme je ako séria hodnôt oddelených medzerou alebo čiarkou.

Najpoužívanejšie funkcie

• length($seznam) - vráti počet položiek v zozname

length(10px 20px 30px) => 3
length(alfa, beta, gama, delta) => 4

• nth($seznam, $index) - vráti hodnotu položky na pozíciu $ index

nth(10px 20px 30px, 2) => 20px
nth((alfa, beta, gama, delta),1) => alfa

• join($seznam1, $seznam2) - spojí $ seznam1 a $ listina2

join((jedna, dva), (alfa, beta)) => jedna, dva, alfa, beta

• index($seznam, $value) - vráti pozíciu položky $ value zo zoznamu $ zoznam

index(1px solid red, solid) => 2

Príklad 6

Vytvoríme si dva zoznamy - zoznam šeliem a vtákov. Zoznamy následne spojíme do zoznamu zvierat.

$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 sú dátovým typom, ktorý môžete poznať pod názvom asociatívne pole. Obsahuje hodnoty dostupné podľa ich kľúča. Kľúče sú unikátne.

Mapy zapisujeme tak, ako ide vidieť na ukážke nižšie.

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

Najpoužívanejšie funkcie

• map-get($mapa, $klic) - vráti hodnotu kľúča $ kluc z mapy $ mapa

map-get(("alfa": "hodnotaAlfy", "beta": "hodnotaBety"), "alfa") => "hodnotaAlfy"
map-get(("alfa": "hodnotaAlfy", "beta": "hodnotaBety"), "alfaa") => null

• map-remove($mapa, $klic) - odstráni položku kľúče $ kluc z $ mapa

map-remove(("alfa": "hodnotaAlfy", "beta": "hodnotaBety"), "beta") => ("alfa": "hodnotaAlfy")

• map-keys($mapa) - vráti zoznam kľúčov z mapy $ mapa

map-keys("alfa": "hodnotaAlfy", "beta": "hodnotaBety") => "alfa", "beta"

• map-values($mapa) - vráti zoznam hodnôt z mapy $ mapa

map-values("alfa": "hodnotaAlfy", "beta": "hodnotaBety") => "hodnotaAlfy", "hodnotaBety"

• map-has-key($mapa, $klic) - vracia, či je v mape $ mapa kľúč $ klic

map-has-key(("alfa": "hodnotaAlfy", "beta": "hodnotaBety"), "alfa") => true
map-has-key(("alfa": "hodnotaAlfy", "beta": "hodnotaBety"), "gama") => false

Null

Dátový typ null je pomerne zvláštnym typom. Využiť sa dá napr. Pre voliteľné argumenty mixin či funkcií. Tento dátový typ môžeme tiež využiť ako napr. Výstup funkcia, ktorá nám určí, aká hodnota sa má pre danú vlastnosť štýlu použiť - kde sa pri hodnote null vlastnosť do CSS nevypíše.

Logická hodnota

Logickou hodnota je dátový typ, ktorá rozpoznáva pravdu a nepravdu - teda true a false. Využiť sa dá predovšetkým pri premenných, ako atribút funkcie či mixin a podobne.

V ďalšom článku si ukážeme cykly a použitia @media.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.