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

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

SASS - CSS Preprocesor (0)

Ako písať prehľadnejšie a kvalitnejšie CSS.

Čo je preprocesor

Vo všeobecnosti je preprocesor program, ktorého výstup bude následne spracovaný ďalším programom. V tomto seriály sa zameriame práve na CSS preprocesor, ktorý nám značne uľahčí dodržiavať takzvaný DRY(Don’t repeat yourself), a tým zvýši prehľadnosť a udržovateľnosť nášho kódu, ktorá je pri vývoji veľmi dôležitá. V klasickom surovom CSS nemôžme využívať také vlastnosti ako premenné, vnáranie kódu, mixiny(znovu použiteľné bloky kódu), podmienky, cykly a pod. Vďaka SASS a podobným CSS preprocesorom sú nám tieto prvky dostupné.

Aké CSS preprocesory poznáme

Medzi najznámejšie CSS preprocesory patrí SASS a LESS. Je samozrejme mnoho ďalších ako Stylus, Switch CSS, CSS Cacheer ale tento seriál je výhradne zameraný na najznámejší z nich, a to SASS. Táto “nultá” kapitola je len takým jemným úvodom do SASS a preprocesorov ako takých. V následujúcich častiach budeme prechádzať podrobne všetkými prvkami a vlastnosťami SASS.

SASS - v skratke

Sass znamená Syntactically Awesome Stylesheets alebo syntakticky úžasné štýly a je napísaný v jazyku Ruby tvorcami Hampton Catlin, Nathan Weizenbaum a Chris Eppstein. Podporuje dve syntaxi. Syntax s koncovkou súboru .sass a .scss. Syntax .sass je podobná jazyku Ruby, kde sa nepoužívajú bodkočiarky, zátovrky a pod. Syntax .scss alebo Sassy CSS je podobná klasickému CSS.

Syntax .sass

a
  color: red
  text-decoration: none

Syntax .scss

a {
  color: red;
  text-decoration: none;
}

Základné vlastnosti SASS:

  1. Premenné
  2. Vnáranie kódu
  3. Čiastočné súbory a import
  4. Mixiny (znovu použiteľné bloky kódu)
  5. Dedičnosť selektorov
  6. Operátory, Funkcie, Podmienky, Cykly atď.

 

Všetky tieto základné vlastnosti SASS si prejdeme po jednotlivých kapitolách a prvé na čo sa zameriame bude využitie premenných.

Všetky podrobné informácie ohľadom SASS nájdete na oficiálnej stránke.

Inštalujeme SASS

Než sa pustíme do jednotlivých častí SASS, pozrieme sa na to ako ho nainštalovať.

Windows

Na Windows potrebujeme ako prvé nainštalovať Ruby. Najjednoduchší spôsob je použiť nástroj Ruby Installer. Po inštalácií tohto nástroja Vám bude dostupná aj Ruby konzola, vďaka ktorej budete mocť používať Ruby knižnice.

Mac

Pre užívateľov Mac-u mám dobrú správu, Ruby je predinštalované a môžme sa pustiť rovno do inštalácie.

Samotná inštalácia

Do konzoly zadajte príkaz gem install sass. V prípade, že Vám nebude tento príkaz fungovať, skúste sudo gem install sass. A je to :).

Prejsť na ďalšiu časť SASS - Premenné (1).

Hodnoť článok:
2 0

0 komentárov 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

Zajtra.sk > Programovanie > CSS/HTML > SASS - CSS Preprocesor (0)


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