Sass (stiililehe keel)

Sass (lühend ingliskeelsetest sõnadest Syntactically Awesome Style Sheets) on stiililehe keel, mida kasutatakse veebilehtede kujundamiseks. Sassis kirjutatud kood teisendatakse edasi CSS-i (Cascading Style Sheets). Sassi kasutatakse, kuna see laiendab CSS-i võimekust, lisades sellele erinevaid meetodeid, mida kasutatakse traditsioonilisemates programmeerimiskeeltes. Sassil on kaks erinevat süntaksit. Algset versiooni nimetatakse taandega süntaksiks (ingl the indented syntax) või lihtsalt Sassiks. Seal kasutatakse koodiplokkide eraldamiskes taanet ning reavahetust, et eraldada reegleid. Uuem süntaks nimega SCSS on laiendus CSS-ile, mis tähendab, et iga CSS-kood on samaaegselt sobiv SCSS-kood. Seal kasutatakse sulge, et märgistada koodiplokke ja semikooloneid, et eraldada reegleid ploki sees. Taandega süntaksiga failides kasutatakse traditsiooniliselt failinimelaiendit .sass ja SCSS-failides laiendit .scss. Ametlik Sassi imlementatsioon on kirjutatud kasutades Rubyt, kuid on ka teisi implementatsioone, mis kasutavad näiteks Darti, PHP-d, C-d või Javat. SassScript lisab CSS-ile järgmised mehhanismid: muutujad, pesastamine, mikserid (ingl mixin) ning selektorite pärilus. Sass lisab muutujate defineerimise. Muutujad algavad dollari märgiga ($) ning muutuja omistamiseks kasutatakse koolonit (:). SassScript toetab nelja andmetüüpi: Number (näiteks 1.2, 13, 10px) Sõne (näiteks "foo", 'bar', baz) Värv (näiteks blue, #04a3f9, rgba(255, 0, 0, 0.5)) Tõeväärtus (näiteks true, false) Muutujad võivad olla Sassi funktsioonide argumentideks või nende tulemuseks. Tõlkimise hetkel asendatakse muutujate väärtused, et tulemuseks oleks sobilik CSS-kood. SCSS stiilis kood $color: red; $margin: 16px; .header { background: $color; margin: $margin; } .footer { margin: $margin; border: 1px solid $color; } või Sass stiilis kood $color: red $margin: 16px .header background: $color margin: $margin .footer margin: $margin border: 1px solid $color kompileeritakse järgnevaks CSS-iks: .header { background: red; margin: 16px; } .footer { margin: 16px; border: 1px solid red; } Sass lisab võimaluse pesastada CSS-i reegleid üksteise sisse. Sisemine reegel rakendub ainult välimise selektori sees. Näiteks: SCSS stiilis kood div.header { background: red; h1 { color: blue; } .logo { margin: 10px; } } div.footer { background: yellow; h2 { color: green; } p { padding: 10px; } } või Sass stiilis kood div.header background: red h1 color: blue .logo margin: 10px div.footer background: yellow h2 color: green p padding: 10px kompileeritakse järgnevaks CSS-iks: div.header { background: red; } div.header h1 { color: blue; } div.header .logo { margin: 10px; } div.footer { background: yellow; } div.footer h2 { color: green; } div.footerp { padding: 10px; } Sass lisab võimaluse kasutada selektorite pärilust. Selleks tuleb kasutada @extend märksõna selektoriga, mida soovitakse pärida. Näiteks: SCSS stiilis kood .punane { background: red; } .punane.rasvane { font-weight: bold; } .punaneRaamiga { @extend .punane border: 1px solid black; } või Sass stiilis kood .punane background: red; .punane.rasvane font-weight: bold .punaneRaamiga @extend .punane border: 1px solid black; kompileeritakse järgnevaks CSS-iks: .punane, .punaneRaamiga { background: red; } .punane.rasvane, .punaneRaamiga.rasvane { font-weight: bold; } .punaneRaamiga { border: 1px solid black; } "Sass koduleht". Vaadatud 19.03.2018. "Hampton's 6 Rules of Mobile Design". Vaadatud 02.05.2018. "Sass dokumentatsioon". Vaadatud 19.03.2018. "Sass koduleht - funktsioonid". Vaadatud 19.03.2018.