Sodoben CSS z Sass - vajeniški vodič

Zahvaljujoč predprocesorjem CSS lahko CSS pišemo veliko bolj učinkovito. Kaj so ti predprocesorji, katere obstajajo in zakaj je izbira v tem primeru padla na Sass, pa prikazuje ta video.

Preden lahko uporabite Sass, ga morate namestiti. In za to je potreben Ruby. Oba - torej namestitev Rubyja in Sassa - bosta prikazana v tem videu. Nato lahko takoj preverite, ali je namestitev Sassa dejansko uspela.

Sass-je treba pretvoriti v CSS-datoteke, da jih lahko dejansko uporabljate. Zahvaljujoč Watch ukazu lahko enostavno zaznate spremembe v posameznih datotekah ali v celotnih mapah.

Z Ukazom @import je mogoče uvoziti in združiti datoteke SCSS. Kaj vse ima to opraviti s predpono podčrtaja v imenu datoteke, je en vidik tega videoposnetka.

V Sassu je možnost deklaracije spremenljivk. Ta koncept v običajnem CSS-u očitno ni na voljo, vendar je v Sassu genialno sredstvo za učinkovit razvoj slogovnih listov.

Zahvaljujoč gnezdjenju je mogoče sintakso Sassa obdržati veliko bolj jedrnato, kot je običajno pri CSS. Tudi pomaga vam, da kodo napišete veliko pregledneje.

Uporaba @extend vam omogoča prenos nabora CSS lastnosti od enega do drugega selektorja. Tudi to vam pomaga ohranjati datoteke Sass preproste.

Izbrani selektor omogoča definicijo modulov. Ta modularizacija omogoča razdelitev Sass sintakse na logične bloke, ki jih je mogoče vključiti na različnih mestih.

Mixini so funkcije, s pomočjo katerih je mogoče bistveno poenostaviti delovne procese. V tem videu je prikazano, kako lahko definirate svoje lastne mixine in jih nazadnje uporabite.

S selektorjem, o katerem gre v tem videu, lahko dostopate do starševskega elementa elementa. Ta selektor v CSS-ju znanstveno ni in ponuja zato ogromno dodatno vrednost.

Sass omogoča uporabo for zank. To deluje zelo enostavno v Sass-u in se lahko na primer uporabi za definiranje lastnega mrežnega sistema.

Poleg For-zanke se lahko v Sassu uporabljata tudi Each- in While-zanke. Kako lahko to izkoristimo za avtomatizacijo, pa prikazuje to video.

V jezikih, kot sta PHP in JavaScript, obstaja možnost odzivanja na različne dogodke s pomočjo izjave if in else. To vrsto možnosti dejansko obstaja tudi v Sassu. Kako to izkoristiti, prikazuje to video.

Lahko računate v Sassu. To je na primer praktično glede določitve velikosti pisave. Zahvaljujoč ustreznim operatorjem pa lahko tudi ustvarite svoj lasten mrežni sistem.

Seveda je mogoče v Sassu definirati barve. Vendar Sass gre tudi na tem področju precej dlje kot običajni CSS. Zahvaljujoč ustreznim funkcijam, je na primer mogoče enostavno manipulirati barve.

Compass-ov okvir še dodatno razširi možnosti Sass, Ta prvi video prikazuje, kako namestiti in uporabljati Compass.

Spletna stran projekta Compass je osrednje informacijsko sredstvo, kadar gre za delo s tem ogrodjem. Pokazal vam bom, kako lahko delate z dokumentacijo CSS3 z orodjem Compass.

Primer prikazuje, kako enostavno je stvari mogoče implementirati s Compassom. Na koncu te serije se bo tudi pogledalo alternativni Sass ogrodje. Susy ponuja vitki sistem mreže.