Sass (stiililehe keel)

Allikas: Vikipeedia
Jump to navigation Jump to search
Sass
Sass Logo Color.svg
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

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.[1]

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.[2]

SassScript lisab CSS-ile järgmised mehhanismid: muutujad, pesastamine, mikserid (ingl mixin) ning selektorite pärilus.[3]

Muutujad[muuda | muuda lähteteksti]

Sass lisab muutujate defineerimise. Muutujad algavad dollari märgiga ($) ning muutuja omistamiseks kasutatakse koolonit (:).[3]

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.[4] 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[muuda | muuda lähteteksti]

Sass lisab võimaluse pesastada CSS-i reegleid üksteise sisse. Sisemine reegel rakendub ainult välimise selektori sees.[3] 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[muuda | muuda lähteteksti]

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[muuda | muuda lähteteksti]

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