3. díl - Datové typy v SASS

HTML a CSS Moderní a profesionální webové portfolio Datové typy v SASS

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

Datový typ čísla obsahuje jakékoliv číslo - tedy jakékoliv 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($cis­lo) - vrátí číslo převedené na procenta
percentage(0.23) => 23%
percentage(100px / 50px) => 200%
  • round($cislo) - vrátí zaokrouhlené číslo, k nejbližšímu celému
round(23.4px) => 23px
round(23.6px) => 24px
  • abs($cislo) - vrátí absolutní hodnotu čísla
abs(23px) => 23px
abs(-23px) => 23px
  • min($cisla…) - vrátí nejmenší číslo ze seznamu
min(7px, 23px) => 7px
min(2em, 23em, 7em) => 2em
  • max($cisla…) - vrátí největší číslo ze seznamu
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 obsahuje 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í proměnných nezávisle na okolním kódu můžeme provést pomocí speciálního #{ ... }, kde se obsah uvnitř závorek vypíše jako textový řetězec. Můžeme tak ošetřit třeba zápis, kde nechceme interakci čísel - například dělení či násobení - ale chceme je pouze vypsat.

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. Můžeme mezi sebou, vždy barvy stejného typu, 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($co­lor, $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 nic 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 - počítající od 1
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. Datový typ obsahuje hodnoty dostupné podle jejich klíče, kde klíč je unikátní a má právě jednu hodnotu.

Zapisujeme jej 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") => "alfa", "beta"
  • map-has-key($mapa, $klic) - ověří, zda v mapě $mapa je klíč $klic a vrátí logickou hodnotu
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 137x (930 B)
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 (7 hlasů) :
55555


 


Miniatura
Následující článek
Cykly a @media v SASS

 

 

Komentáře

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

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

Odpovědět 2.10.2014 17:54
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Jakub Štol
Člen
Avatar
Jakub Štol:

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

Odpovědět  +1 3. července 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š.
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 2 zpráv z 2.