Kaj so SASS, LESS in Stylus?

SASS, LESS in Stylus so odprtokodni predprocesorski jeziki CSSja (Cascading Style Sheets). Tako SASS, LESS in Stylus dodajo CSS-ju dinamično obnašanje v obliki spremenljivk, operacij, funkcij … Vsi jeziki so na koncu prevedeni v standardno obliko CSS-ja. Namen SASS-a, LESS-a in Stylus-a je pohitriti in poenostaviti oblikovanje spletnih projektov.

SASS/SCSS

SASS(Syntactically Awesome Stylesheets) uporablja dve različni sintaksi. Prva sintaksa je bila podobna sintaksi Haml, ki uporablja zamike za ločevanje posameznih blokov kode in nove vrstice brez ločil na koncu.
Medtem se druga z imenom SCSS zgleduje po CSS sintaksi in uporablja zavite oklepaje za označevanje posameznih blokov kode in podpičja za ločevanje vrstic. Datoteke imajo končnico .sass oziroma .scss.

SASS je bil prvotno sprogramiran v programskem jeziku Ruby. Pojavile pa so se že druge oblike, med drugim tudi PHP za Drupal. SASS lahko uporabljamo le na strežniški strani (server-side).

Primer SASS sintakse

$blue: #3bbfce

.content-navigation
border-color: $blue
color: darken($blue, 9%)

Primer SCSS sintakse

$blue: #3bbfce;

.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}

CSS rezultat zgornje kode

.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}

LESS

LESS uporablja samo eno sintakso, ki se zgleduje po CSS sintaksi in je tudi zelo podobna SCSS sintaksi. Uporablja zavite oklepaje za označevanje posameznih blokov kode in podpičja za ločevanje vrstic. Datoteke imajo končnico .less.

LESS je bil prav tako prvotno sprogramiran v programskem jeziku Ruby. Vendar je bila v novejših verzijah uporaba Ruby-ja opuščena in zamenjana z JavaScriptom. Za razliko od SASSa lahko LESS teče tako na strani strežnika (server-side), kot na strani uporabnika (client-side).

Primer LESS sintakse

@color: #3bbfce;

.content-navigation {
border-color: @color;
color: darken(@color, 9%);
}

CSS rezultat zgornje kode

.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}

Stylus

Stylus je v primerjavi z SASSom in LESSom veliko bolj fleksibilen. Velik del njegove sintakse je opcijski in mu je tako vseeno, kako jo zapisujete. Stylus je tako enostaven in robusten za uporabo, ampak njegov obstoj je vprašljiv. Razlog tiči v tem, da ima od ostalih dveh jezikov slabšo podporo pri razvoju, trenutno ga namreč razvija samo ena oseba. Datoteke imajo končnico .styl.

Stylus lahko prav tako uporabljamo na strani strežnika (server-side), kot na strani uporabnika (client-side).

Primer Stylus sintakse

mainColor = #3bbfce
.content-navigation
border-color mainColor
color darken(mainColor, 9)

CSS rezultat zgornje kode

.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}

SASS uradna stran in Wiki stran
LESS uradna stran  in Wiki stran
Stylus uradna stran

Zanimiva branja:
Sass vs. LESS vs. Stylus: Preprocessor Shootout
CSS-tricks: Musings on Preprocessing
CSS-tricks: SASS vs. LESS
Smashing magazine: An Introduction To LESS, And Comparison To Sass
Debata na temo kdo je boljši: Sass vs Less

Komentiraj


*