SASS - Premenné (1) - Zajtra.sk
spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Michal Marek 20.5.2014
Hodnoť článok:
2 0

SASS - Premenné (1)

Uľahčujeme si prácu vďaka premenným.

K čomu su určené

Premenné sú jednou z hlavných výhod SASS a podobných preprocesorov. Umožňujú nám jednoducho si nazvať určitú CSS vlastnosť, ktorú môžme opakovane používať odkazovaním sa na jej názov, čo je efektívnejšie ako písať tú istú vlastnosť stále dookola. Túto výhodu pocítime hlavné v prípade neskorších úprav a zmien v kóde.

Vytvárame si našu prvú premennú

V SASS sa používa na vytvorenie premennej znak "$" a za ním následuje zvolený názov premennej. Premenná sa deklaruje podobne ako vlastnosť v CSS viď príklad 1.1.

Príkad 1.1

.scss

$base-color: #222;

body {
  color: $base-color;
}

.css

body {
  color: #222;
}

Vo výstupe CSS vidno, že SASS jednoducho nahradí premennú za jej hodnotu. Akákoľvek hodnota, ktorá môže byť použitá pre CSS vlastnosť, môže byť použitá ako hodnota premennej.

Ak chcete zkompilovať .scss alebo .sass súbor do .css, zadajte do konzoly príkaz sass style.scss style.css, kde "style.scss" je názov SASS súboru a "style.css" je názov súboru, do ktorého Vám bude vygenerované surové CSS. Tiež môžte použiť príkaz sass --watch style.scss:style.css, ktorý Vám bude ihneď všetky zmeny v SASS premietať do CSS.

Názov premennej

SASS povoľuje pri názve premennej používať rovnaké znaky, aké sa môžu používať pri selektoroch a vlastnostiach v CSS. Taktiež znaky ako "-" a "_". Ja osobne preferujem pomlčky ako v predošlom príklade, ale taktiež je možné pomenovať premennú ako "$base_color". Či už použijete prvú alebo druhú variantu, SASS vyhodnotí oba rovnako, pretože "$base-color" a "$base_color" odkazuje na rovnakú premennú.

Odkazujeme sa na premenné

Ako som spomínal, premenná je jednoducho nahradená za hodnotu, ktorú ma definovanú, a preto môže byť umiestnená kdekoľvek ako ľubovoľna CSS vlastnosť ako je uvedené v príklade 1.2. Taktiež môže vlastnosť alebo hodnota premennej odkazovať na inú premennú ako v príklade 1.3.

Príklad 1.2

.scss

$contrast-color: #42ecaa;

body {
  border-top: 3px $contrast-color solid;
}

Príklad 1.3

.scss

$bg-color: #ddd;
$base-border: 1px solid $bg-color;

h1 {
  border-top: $base-border;
}

Záverom

Ako ste si mohli všimnúť, pracovať s premennými je veľmi jedoduché a užitočné. Premenné môžu obsahovať ešte príznak alebo označenie !default, ktoré si ale vysvetlíme v spojení s čiastočnými súbormi a importom súborov. V následujúcej časti sa zameriame na vnáranie kódu, ktoré nás vrámci efektivity opät posunie ďalej ;).

Späť na časť SASS - CSS Preprocesor (0).

Prejsť na ďalšiu časť SASS - Vnáranie kódu (2).

Hodnoť článok:
2 0

2 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 21.5.2014 14:12:37
@Vladimír Majoroš
Spomenul som, že túto výhodu pocítime hlavné v prípade neskorších úprav a zmien v kóde. Zober si napríklad, že budeš mať farbu #222 definovanú v sto selektoroch. Čo sa ti bude lepšie v budúcnosti upravovať? Prepísať farbu stokrát alebo na jednom mieste? Neberiem samozrejme možnosť "Replacing" v editoroch. A to nie je jediná výhoda premenných, čo budeš môcť vidieť v ďalších častiach.
0 0 Vladimír Majoroš 21.5.2014 14:05:54
Určite bude nejaký dôvod, prečo používať premenné, ale zatiaľ to vyzerá tak, že klasický zápis je jednoduchší.
Zajtra.sk > Programovanie > CSS/HTML > SASS - Premenné (1)


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