Ominaisuus #1: Muuttujat
Vaihtelevat CSS-luokat voivat sisältää saman säännön tai samat säännöt projektissa. Esimerkiksi verkkosivullamme on 20 laatikkoa, joilla on eri taustavärit:
.box-1 {
width: 100px;
height: 100px;
background: red;
}.box-2 {
width: 100px;
height: 100px;
background: yellow;
}....box-20 {
width: 100px;
height: 100px;
background: blue;
}
Myöhemmin asiakkaamme muuttaa mielensä ja haluaa isommat laatikot. Minun on siis lisättävä jokaisen luokan width– ja height-ominaisuuksia yksi kerrallaan. Tämä voi olla myös 50 luokkaa. Tosielämän ohjelmoinnissa tämä voi olla turhauttavaa. Kuten edellä mainitsin, tämä on esimerkki suuresta vaivasta pienten muutosten eteen.
Miten voimme tehdä sen tehokkaammin?
Sass tarjoaa ratkaisun: muuttujat. Kuten muissakin ohjelmointikielissä, voimme käyttää muuttujia arvojen tallentamiseen ja niiden myöhempään uudelleenkäyttöön.
Muuttujan määrittely:
$variable-name: value;
Palatakseni yllä olevaan esimerkkiin, jos määrittelemme muuttujat width & height :lle
$box-width: 100px;
$box-height: 100px;
jälkikäteen, kun tarvitaan muutos, meidän tarvitsee vain muuttaa niiden arvot kerran:
$box-width: 200px; // changed from 100px to 200px
$box-height: 200px; // that's all!.box-1 {
width: $box-width; // using variables now instead of pixels
height: $box-height;
background: red;
}.box-2 {
width: $box-width;
height: $box-height;
background: yellow;
}....box-20 {
width: $box-width;
height: $box-height;
background: blue;
}
CSS itse tukee nyt myös muuttujia, mutta se ei toimi IE:ssä & muiden selainten vanhoissa versioissa:
Ominaisuus nro 2: Sisäkkäisyys
Vakiomuotoinen CSS ei tue sisäkkäisyyttä. Emme voi kirjoittaa luokkaa toisen luokan sisään. Projektin kasvaessa tämä tuo mukanaan luettavuusongelman, eikä rakenne näytä kivalta.
Määritellään esimerkiksi navigointivalikko klikattavine linkkeineen alla olevassa HTML:ssä:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
HTML tukee sisäkkäistä koodia. Ilman sisäkkäisyyttä ne näyttävät kuitenkin CSS:ssä tältä:
Meidän piti kirjoittaa nav jokaiselle tagille, jopa ankkurin pseudo-luokalle (hover), koska nav on kaikkien vanhemmatag. Sass kuitenkin tukee sisäkkäisyyttä:
Tässä voimme kirjoittaa paremmin jäsenneltyä koodia kuten HTML:ssä. Meidän ei tarvitse kirjoittaa nav-luokkaa luokan perään, mikä myös estää redundanssia
Tärkeää: Luokkia ei suositella pesimään 3 tasoa syvemmälle.
Ominaisuus #3: Mixins
Oppasimme edellä, miten CSS-sääntöjä varten käytetään muuttujia. Mutta entä jos haluamme käyttää ryhmää sääntöjä yhdessä? Sassissa on ominaisuus nimeltä mixins, jonka avulla voimme tehdä sen.
Mikä on mixin?
Mixins ovat Sass-funktioita, jotka ryhmittelevät CSS-deklaraatioita yhteen. Voimme käyttää niitä myöhemmin uudelleen kuten muuttujia.
Voit luoda mixinin @ mixin-komennolla, jota seuraa nimi:
@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}
tai voimme luoda mixinin funktioksi ja lisätä myös parametreja:
$font-color: red;@mixin my-font($font-color) {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
}
Mixinin luomisen jälkeen voimme käyttää sitä missä tahansa luokassa @ include-komennolla. Voimme siis käyttää my-font mixiniä sen sijaan, että tarvitsisimme joka kerta 4 riviä fonttisääntöjä. Tämä lähestymistapa yksinkertaistaa koodia.
p {
@include my-font;
}
Mixinien käyttäminen on hyvä tapa ehkäistä koodin redundanssia.
Ominaisuus #4: Tuonnit
Viimeiseksi voimme leikata valtavat CSS-tiedostomme pienemmiksi paloiksi Sassin tuontiominaisuuden avulla. On paljon helpompi lukea & ylläpitää pienempiä tiedostoja kuin yhtä suurta tiedostoa, jossa on loputtomasti rivejä.
Todellisuudessa CSS:ssä on nyt myös tuontiominaisuus. Mutta se toimii eri tavalla. CSS lähettää HTTP-pyynnön palvelimelle joka kerta tiedoston tuontia varten. Sass tekee sen ilman HTTP-pyyntöä, mikä on nopeampi lähestymistapa.
Tuoda Sass-tiedostosi @ import-komennolla toiseen Sass-tiedostoon:
// Your main Sass file@import 'file';
@import 'anotherFile';.class {
// Your code
}
Tiedostopolussa ei tarvitse käyttää .scss-laajennetta, Sass ymmärtää sen.
Sass ymmärtää sen.