Jednostavnost CSS-a je uvek bila jedna od njegovih glavnih karakteristika. CSS stilovi su samo dugačke liste pravila koje se sastoje od selektora i stilova koji se za njih primenjuju.
Ali, kako web sajtovi ili aplikacije postaju veći i kompleksniji i primenjuju se na širi spektar uređaja i veličina ekrana, dolazi do komplikovanja koda. U ovoj situaciji se javlja potreba da se jednostavnost CSS-a i zadrži.
[divider_1px]
Kao odgovor na ovaj zahtev kreirana je nova sintaksa za CSS, čiji je cilj da olakša upravljanje kompleksnim CSS fajlovima. Ovo se postiže uoptrebom preprocesora (programa koji se izvršavaju na vašem kompjuteru ili serveru) koji prevode novu unapređenu sintaksu u stari klasični CSS koji browser-i razumeju.
Ova sintaksa se naziva Sass, skraćenica od „syntactically awesome style sheets“.
Za razliku od regularnog CSS-a, Sass je pravi skriptni jezik sa izrazima, funkcijama, varijablama, uslovnom logikom i petljama.
Niste u obavezi da koristite sve ove opcije da bi ste dobili benefite od Sass-a, ali one su vam uvek na raspolaganju. U situacijama kada se budete susreli velikim i kompleksnim projektima moći ćete da ponavljajuće CSS kodove učinite mnogo lakšim za kodiranje i održavanje.
DRY princip
Činjenica je da CSS nije jednostavan. Pored poznavanja šta svaka od osobina radi, potrebno je znati kakva je podrška za browser-e, prilagoditi ga različitim tipovima uređaja i konstantno se suočavati sa rešenjima novih problema za specifične zahteve projekta.
CSS je originalno zamišljen kao jednostavan i nije predviđen za rešavanje zahteva sa kojima se danas susrećemo prilikom izrade web sajta. Ovaj problem je delimično rešen objavljivanjem nove verzije CSS3, ali i dalje se moramo oslanjati na tehnike koje pokrivaju sve svrhe i namene – razne hakove.
Kako bi se rešio problem kompleksnosti koda u softverskom inženjeringu se koristi poznata metoda organizacije pod nazivom DRY princip. DRY je skraćeno od „don’t repeat yourself“.
Osnova ovoga principa je u tome da svaki deo znanja mora imati jedinstvenu, nedvosmislenu i autoritativnu predstavu unutar sistema.
CSS je sve, samo nije DRY.
Često možete naći ponavljanje pravila, deklaracija i vrednosti. Stalno se ponavljaju slični delovi koda za boje, fontove, često korišćene stilove unutar našeg dokumenta.
Šta je Sass?
Sass je CSS preprocesor – sloj između stilova kojima vi upravljate i .css fajlova koje prosleđujete serveru. Sass popunjava rupe u CSS-u kao jeziku, dozvoljavajući vam da pišete DRY kod koji će biti brži, efikasniji i lakši za održavanje.
Sass omogućava da dodate super funkcionalnosti vašem klasičnom CSS-u, a zatim ih prevodi (kompajlira) u regularne CSS fajlove preko različitih programa ili web framework plugin-a.
Primer upotrebe Sass-a
// constants.scss
[css]
$brand-color: rgb(255,0,0);
$accent-color: darken($brand-color, 10); // That is, 10% darker than the brand-color.
$body-font: „Helvetica Neue“, Arial, sans-serif;
$header-font: „Segoe UI“, „Myriad Pro“, $body-font;
$width: 960px;
[/css]
// style.scss
[css]
@import ‘constants’;
body {
font-family: $body-font;
width: $width – 2 * 10px;
padding:10px;
}
h1,h2,h3,h4 {
font-family: $header-font;
}
h1 {
color:$brand-color;
}
section {
h1 {
color:$accent-color;
}
}
[/css]
Kako se koristi SASS?
Pre nego što počnete sa korišćenjem Sass-a, potrebno je da ga podesite za vaš projekt. Više informacija o instalaciji Sass-a možete pronaći na oficijalnom sajtu.
Ukoliko želite da počnete sa učenjem Sass-a obavezno pročitajte početno upustvo, a za detaljnije informacije možete istražiti kompletnu Sass dokumentaciju.
Kakva su vaša iskustva sa korišćenjem Sass-a? Podelite ih sa nama u komentarima?
