spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Michal Marek 5.6.2014
Hodnoť článok:
4 0

SASS - Operátory, funkcie, cykly a iné (6)

Objavujeme posledné vlastnosti SASS. *** Celý seriál na stiahnutie v pdf na konci článku. ***

Začíname

Do tejto chvíle sme sa dozvedeli o mnohých výhodách SASS ako sú premenné, vnáranie kódu, mixiny, dedičnosť a pod. Tieto vlastnosti sú nám užitočné na to, aby sme čo najviac eliminovali opakujúce sa štýly a vytvárali tak čo najprehľadnejší a dobre udržovateľný kód. Mixiny a premenné ale môžu vyjadrovať iba taký štýl a takú hodnotu akú im definujeme. Môže sa stať, že budeme potrebovať mixiny alebo premenné mierne odlišné v rôznych situáciach. V tomto prípade nám pomôžu skriptovacie vlastnosti SASS.

Výrazy

Sú najbežnejším spôsobom ako manipulovať s CSS hodnotami v SASS. Výraz je čokoľvek, čo sa nachádza v definícií vlastnosti. V bežnom CSS sú to hodnoty ako “underline”, “20px” alebo viacero hodnôt ako “1px solid #666”. V SASS môžme použiť okrem premenných aj matematické operátory +, -, *, / a % (Príklad 6.1).

Príklad 6.1

.scss

$number-one: 10;
$number-two: 20px;

body {
  padding-top: $number-one + $number-two;
}

.css

body {
  padding-top: 30px;
}

Dátové typy

Každá hodnota v CSS vlastnosti alebo v SASS premennej má nejaký typ. V závislosti na týchto typoch môžu fungovať rôznymi spôsobmi. Hodnoty ako "#fff" alebo "blue" reprezentujú farbu textu, farbu pozadia atď. Hodnoty typu "20px" reprezentujú číslo a sú používané pre "width", "padding" a pod. Ešte máme hodnoty typu "none", "auto", "middle", ktoré reprezentujú mnoho ďalších vecí. SASS všetkym typom rozumie a umožňuje s nimi manipulovať. Spôsobom akým s nimi manipuluje, je závislý od konkrétneho dátového typu.

Dátový typ - Reťazec

V SASS rozlišujeme dva typy reťazcov. Reťazec v úvodzovkách (“Open Sans”) a reťazec bez úvodzoviek (underline, bold, ...). Hlavný rozdiel medzi týmyto typmi reťazcov je taký, že reťazec v úvodzovkách môže obsahovať akýkoľvek znak okrem znaku (“) a reťazec bez úvodzoviek nemôže začínať číslami alebo špeciálnymi znakmi, a nesmie taktiež obsahovať znaky ako “*” a “&”. S reťazcami sa využíva najmä operátor "+". Pri spájaní reťazcov sa vždy vytvorí nový reťazec. Jeho typ závisí podľa typu práve spájaných reťazcov (Príklad 6.2).

Príklad 6.2

.scss

// string   + string    => string
// “string” + “string”  => “string”
// string   + “string”  => string
// “string” + string    => “string”
// string   + 1         => string1
// “string” + 1         => “string1"

Iné operácie nie sú podporované a ak sa použije napríklad operátor "-" (string - string), tak výsledok bude (string-string).

Dátový typ - Číslo

V SASS ako aj v CSS májú čísla dve časti. Prvá je číselná hodnota a druhá, voliteľná časť je jednotka čísla (px, em, ...). S číslami môžme robiť základné aritmetické operácie a taktiež použiť operáciu modulo, ktorá hovorí o zvyšku po delení dvoch čísel. Modulo označujeme znakom %. Pri násobení dajte pozor, aby ste nenásobili obe čísla s jednotkami, ako napríklad “20px * 20px”, pretože SASS by to vyhodnotil ako chybu. Pri delení môže vzniknuť jedna zvláštnosť, a to že v prípade keď použijete operáciu deleno, napríklad s reťazcom, potom sa tento výraz vyhodnotí ako spojenie reťazcov. V prípade delenia môžte použivať pri oboch číslach ich jednotky (Príklad 6.3).

Príklad 6.3

.scss

// 20px*10px => 200px*px => error
// 20px*10   => 200px
// 20px/10px => 2
// 20px/10   => 2px
// auto/10px => auto/10px

Dátový typ - Farba

Farby môžme zapísať v CSS rôznymi spôsobmi. Najbežnejší spôsob je zapísať farbu ako hexadecimálnu reprezentáciu kanálov RGB. Farba "#fff" reprezentuje 255(R-red), 255(G-green), 255(B-blue). Túto farbu môžme zadefinovať aj pomocou funkcie rgb(255, 255, 255).

Ďalšie funkcie sú hsl(), ktorá je podobná rgb(), hsla() a rgba(), kde môžme navyše zadefinovať transparentnosť farby. Farby môžme ešte zadefinovať pomocou názvu ako “blue”, “red” atď. V prípade farieb môžme používať všetky obyčajné aritemtické operácie, ale nie je to pre nás tak užitočné ako práca s funkciami.

Dátový typ - Zoznam

Zoznamy sú jednoduché sekvencie hodnôt, ktoré sú používané pre skladanie vlastností ako "border" alebo "background". Vlastnosť "1px solid #222" je zoznam troch hodnôt. Hodnoty môžu byť oddelené medzerami alebo čiarkami (Príklad 6.4). V CSS môžme používať iba jednotlivé hodnoty, ale v SASS môže zoznam obsahovať ďalšie zoznamy hodnôt (Príklad 6.5).

Príklad 6.4

.scss

$color1: #222;
$color2: #444;
$color3: #666;

$colors: $color1 $color2 $color3;
$colors: $color1, $color2, $color3;

Príklad 6.5

.scss

$color1: #222;
$color2: #444;
$color3: #666;
$color4: #222;
$color5: #444;
$color6: #666;

$colors: $color1 $color2 $color3, $color4 $color5 $color6;  

//Iny zapis vnoreneho zoznamu
$colors: ($color1 $color2 $color3), ($color4 $color5 $color6);
$colors: ($color1 $color2) ($color3 $color4) ($color5 $color6);

Aritemtické operácie nemajú pri zoznamoch žiadne praktické využitie. Zoznamy sú veľmi praktické hlavne pri použití direktívy @each.

Dátový typ - Boolean

Tento dátovy typ budeme používať hlavne pri direktíve @if. Boolean nemá aritmetické operátory, ale namiesto nich má operátory "and", "or" a "not". Môžu byť použité s akoukoľvek hodnotou, ale najčastejšie budú používané s hodnotou typu Boolean. Ešte máme k dispozicií operátory <, <=, >, >=, ==.

Funkcie

Funkcie v SASS sa používajú podobne ako v CSS. V SASS sú navyše vyhodnotené ako súčasť výrazu a taktiež vracajú hodnotu. Funkcia môže mať aj pomenované argumenty podobne ako v mixine. Teraz sa pozrieme na niektoré vstavané SASS funkcie, ktoré nám môžu byť veľmi užitočné.

Funkcie - Čísla

SASS má niekoľko vstavaných funkcií pre prácu s číslami ako napríklad "ceil($cislo)", ktorá nám zaokrúhli číslo smerom nahor, "percentage($cislo)", ktorá nám zkonvertuje desiatkové číslo na percento a mnoho iných, podobných funkcií (Príklad 6.6).

Príklad 6.6

.scss

$number: 11.2px

body {
  font-size: ceil($number);
}

.css

body {
  font-size: 12px;
}

Funkcie - Farby

Funkcie farieb môžme rozdeliť do dvoch kategórií. Funkcie, ktoré nám vrátia informácie o farbe a funkcie, ktoré transformujú pôvodnú farbu na novú. Napríklad funkcia "alpha($farba)" je jedna z informatívných funkcií a vráti alpha kanál konkrétnej farby. Na druhej strane funkcia "grayscale($farba)" je transformačná a vráti odtieň šedej (Príklad 6.7).

Príklad 6.7

.scss

$color: #ac2211;
body {
  background: complement($color);
}

.css

body {
  background: #5f5f5f;
}

Funkcie - Zoznamy

SASS má vstavané funkcie aj pre zoznamy a jedna z najviac používaných je funkcia "nth($zoznam, $index)", ktorá vráti konkrétny prvok zoznamu. Musíme si ale dať pozor, že SASS indexuje od jednotky (Príklad 6.8). Ďalšia užitočná funkcia pre zoznam je "length($zoznam)", ktorá vráti počet prvkov v zozname.

Príklad 6.8

.scss

$colors: (#222, #444, #666);
$first-color: nth($colors, 1);

body {
  color: $first-color;
}

.css

body {
  color: #222;
}

Všetky vstavané SASS funkcie nájdete v dokumentácií SASS.

Funkcie - Vlastná definícia

Na definovanie vlastných funkcií nám slúži direktíva @function a je pre nás užitočná hlavne pri opakovanom vypočte alebo transformácií farby. Vlastná funkcia pracuje podobne ako mixin, ale na rozdiel od mixinu nám funkcia musí vrátiť nejaký výsledok. Vrátenie výsledku definujeme pomocou direktívy @return (Príklad 6.9).

Príklad 6.9

.scss

$base-height: 100px;

@function set-smaller-height($height) {
  @return ($height - 20px) / 2;
}

body {
  height: set-smaller-height($base-height)
}

.css

body {
  height: 40px;
}

Výrazy v selektoroch a názvoch vlastností

CSS vlastnosti nie sú jediné miesto, kde môžme umiestňovať v rámci SASS nejaké CSS hodnoty. SASS nám umožňuje vkladanie výrazov aj do selektorov a názvov vlastností pomocou špeciálnej syntaxi "#{výraz}". Táto vlastnosť je známa ako interpolácia a je vhodná hlavne pre prácu s mixinami (Príklad 6.10).

Príklad 6.10

.scss

@mixin own-class-and-property($class, $property-name){
  .class-#{$class} {
    property-#{$property-name}: #222;
  }
}

@include own-class-and-property("own", "special");

.css

.class-own {
  property-special: #222;
}

Kontrolné direktívy

Kontrolné direktívy sú špeciálnym typom direktív, ktoré riadia akým spôsobom sa kus kódu v SASS vyrenderuje v rámci CSS. Tieto direktívy zapisujeme pomocou syntaxes @directive {...}. Medzi kontrolné direktívy patrí @for, @each a @if.

Kontrolná direktíva - @for

Direktíva môže byť zapísaná dvoma spôsobmi. Prvý zápis je @for $i from 1 to 5 {...} a druhý zápis je @for $i from 1 through 5 {...}. Pre každý zápis je premenná "$i" nastavená na 1 a každým cyklom narastá o 1. Rozdiel medzi prvým zápisom a druhým je taký, že pri prvom zápise premenná $i sa zastaví na čísle 4 a pri druhom zápise sa zastaví na čisle 5. Namiesto čísel 1 a 5 v direktíve môžte samozrejme použiť premenné (Príklad 6.11).

Príklad 6.11

.scss

@for $i from 1 through 5 {
    .class-number-#{$i} {
        border: $i + 0px solid #222;
    }
}

.css

.class-number-1 { border: 1px solid #222; }
.class-number-2 { border: 2px solid #222; }
.class-number-3 { border: 3px solid #222; }
.class-number-4 { border: 4px solid #222; }
.class-number-5 { border: 5px solid #222; }

Ako sme videli tak direktíva @for môže byť vcelku užitočná. Ešte užitočnejšia je ale direktíva @each, ktorou môžme prechádzať zoznamy.

Kontrolná direktíva - @each

Direktíva je užitočnejšia práve v tom, že prechádza všetkými prvkami na rozdiel od direktívy @for, ktorá len cykluje v určitom pevne danom intervale. Túto direktívu zapisujeme pomocou @each $prvok in $zoznam (Príklad 6.12).

Príklad

.scss

$sections: home, service, contact;

@each $section in $sections {
  .#{$section} {
    background-image: url(/images/#{$section}.jpg);
  }
}

.css

.home    { background-image: url(/images/home.jpg); }
.service { background-image: url(/images/service.jpg); }
.contact { background-image: url(/images/contact.jpg); }

Kontrolná direktíva - @if

Posledná kontrolná direktíva sa zapisuje pomocou @if podmienka {...}. Ak je podmienka vyhodnotená ako "true" blok kódu v tele direktívy sa vykoná, v inom prípade bude telo direktívy ignorované (Príklad 6.13). S direktívou @if môžme použiť aj direktívu @else (Príklad 6.14).

Príklad 6.13

.scss

$optimize-for-opera: 1;

.radius {
  @if $optimize-for-opera {
    -o-border-radius: 10px;
  }

  border-radius: 10px;
}

.css

.radius {
  -o-border-radius: 10px;
  border-radius: 10px;
}

Príklad 6.14

.scss

$optimize-for-opera: 1;

.radius {
  @if $optimize-for-opera > 1 {
     -o-border-radius: 10px;
  } @else {
     border-radius: 10px;
  }
}

.css

.radius {
  border-radius: 10px;
}

Záverom

V tejto časti sme si predstavili všetky skriptovacie vlastnosti SASS a objavili sme ich veľkú výhodu. Súčasne sme si pozreli poslednú časť SASS, ktorá nám bude nápomocná pri vytvárani prehľadného a dobre udržovateľného kódu našich projektov.

Koniec seriálu

Ako sa dalo očakávať, tak seriál o SASS touto časťou končí a čo by som chcel dodať na záver je, že ďakujem všetkým sledovačom, všetkým like-ovačom a všetkým, ktorý mi dali akýkoľvek pozitívny podnet na písanie tohto seriálu :). Dúfam, že sa Vám páčil a bol pre väčšinu užitočný ;).

Celý seriál na stiahnutie v pdf.

Späť na časť SASS - Selektorová dedičnosť (5).

Hodnoť článok:
4 0

3 komentáre k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Michal Marek 8.6.2014 15:57:13
@Patrik Pomichal
Ahoj, už je dostupné pdf seriálu.
1 0 Michal Marek 5.6.2014 10:58:14
@Patrik Pomichal
Spravím v priebehu tohto týždňa a pridám odkaz na konci tohto článku.
0 0 Patrik Pomichal 5.6.2014 10:49:54
Dakujem pekne za zhrnutie SASSu. Tento serial by sa hodil aj ako PDF ktory clovek vytiahne ked potrebuje rychlo si osviezit znalosti o SASS.
Zajtra.sk > Programovanie > CSS/HTML > SASS - Operátory, funkcie, cykly a iné (6)


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama