**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:

* 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;
}

```

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;
}

```

Viited
------

1. ↑  "Sass koduleht". Vaadatud 19.03.2018.
2. ↑  "Hampton's 6 Rules of Mobile Design". Vaadatud 02.05.2018.
3. 1 2 3  "Sass dokumentatsioon". Vaadatud 19.03.2018.
4. ↑  "Sass koduleht - funktsioonid". Vaadatud 19.03.2018.