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:

* 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


```scss
$color: red;
$margin: 16px;

.header {
  background: $color;
  margin: $margin;
}

.footer {
  margin: $margin;
  border: 1px solid $color;
}
```


või Sass stiilis kood


```sass
$color: red
$margin: 16px

.header
  background: $color
  margin: $margin

.footer
  margin:  $margin
  border: 1px solid $color
```


kompileeritakse järgnevaks CSS-iks:

```css
.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


```scss
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


```sass
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:


```css
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


```scss
.punane {
    background: red;
}

.punane.rasvane {
    font-weight: bold;
}
    
.punaneRaamiga {
    @extend .punane
    border: 1px solid black;
}
```


või Sass stiilis kood


```sass
.punane
    background: red;
    
.punane.rasvane
    font-weight: bold
    
.punaneRaamiga
    @extend .punane
    border: 1px solid black;
```


kompileeritakse järgnevaks CSS-iks:


```css
.punane, .punaneRaamiga {
    background: red;
}

.punane.rasvane, 
.punaneRaamiga.rasvane {
    font-weight: bold;
}
    
.punaneRaamiga {
    border: 1px solid black;
}
```


## Viited