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.
Muutujad.
Sass lisab muutujate defineerimise. Muutujad algavad dollari märgiga ($) ning muutuja omistamiseks kasutatakse koolonit (:).
SassScript toetab nelja andmetüüpi:
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;
Pesastamine.
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;
Selektori pärilus.
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;