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.

Sass
Autor	Hampton Catlin
Arendaja	Natalie Weizenbaum, Chris Eppstein
Esmaväljalase	2006
Viimane väljalase	3.5.5 / 4. jaanuar 2018
Litsents	MIT litsents
Veebisait	sass-lang.com

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