Feature #1: Variabelen
Verschillende CSS klassen kunnen dezelfde regel of regels bevatten in een project. Bijvoorbeeld, we hebben 20 vakjes op onze webpagina met verschillende achtergrondkleuren:
.box-1 {
width: 100px;
height: 100px;
background: red;
}.box-2 {
width: 100px;
height: 100px;
background: yellow;
}....box-20 {
width: 100px;
height: 100px;
background: blue;
}
Later, verandert onze klant van gedachten en wil grotere vakjes. Dus moet ik de width en height eigenschappen van elke klasse een voor een verhogen. Dit kunnen ook 50 klassen zijn. In het echte programmeren, kan dit frustrerend zijn. Zoals ik hierboven al zei, is dit een voorbeeld van grote inspanning voor kleine veranderingen.
Hoe kunnen we dit efficiënter doen?
Sass biedt een oplossing: variabelen. Net als in andere programmeertalen kunnen we variabelen gebruiken om waarden op te slaan en deze later opnieuw te gebruiken.
Definitie van een variabele:
$variable-name: value;
Terugkomend op bovenstaand voorbeeld, als we variabelen definiëren voor width & height :
$box-width: 100px;
$box-height: 100px;
wanneer later een wijziging nodig is, hoeven we alleen maar eenmalig hun waarden te wijzigen:
$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 zelf ondersteunt nu ook variabelen, maar het werkt niet in IE & oude versies van andere browsers:
Feature #2: Nesting
Standaard CSS ondersteunt nesting niet. We kunnen geen klasse binnen een andere klasse schrijven. Als het project groter wordt, brengt dit een leesbaarheidsprobleem met zich mee en ziet de structuur er niet mooi uit.
Zetten we bijvoorbeeld een navigatiemenu met klikbare links in HTML hieronder:
<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 ondersteunt geneste code. Zonder nesting zien ze er in CSS echter zo uit:
We moesten nav voor elke tag schrijven, zelfs voor de pseudo-klasse van het anker (hover) omdat nav de parent-tag van allemaal is. Sass ondersteunt echter nesting:
Hier kunnen we beter gestructureerde code schrijven zoals in HTML. We hoeven geen nav klasse na klasse te schrijven, wat ook redundantie voorkomt
Belangrijk: Het wordt niet aanbevolen om klassen dieper dan 3 niveaus te nesten.
Feature #3: Mixins
We hebben hierboven geleerd hoe we variabelen voor CSS-regels kunnen gebruiken. Maar wat als we een groep regels samen willen gebruiken? Sass heeft een functie genaamd mixins, waarmee we dat kunnen doen.
Wat is een Mixin?
Mixins zijn Sass functies die CSS declaraties groeperen. We kunnen ze later hergebruiken zoals variabelen.
We kunnen een mixin maken met @ mixin commando, gevolgd door een naam:
@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}
of we kunnen een mixin maken als een functie en ook parameters toevoegen:
$font-color: red;@mixin my-font($font-color) {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
}
Nadat we de mixin hebben gemaakt, kunnen we hem in elke klasse gebruiken met @ include commando. Zo kunnen we gebruik maken van de my-font mixin in plaats van 4 regels van lettertype regels elke keer. Deze aanpak vereenvoudigt de code.
p {
@include my-font;
}
Het gebruik van mixins is een goede manier om redundantie in de code te voorkomen.
Feature #4: Imports
Ten slotte kunnen we onze enorme CSS-bestanden in kleinere stukjes knippen met de importfunctie van Sass. Het is veel gemakkelijker om & kleinere bestanden te lezen dan één groot bestand met eindeloze regels.
Eigenlijk heeft CSS nu ook een import-functie. Maar het werkt anders. CSS stuurt elke keer een HTTP verzoek naar de server om een bestand te importeren. Sass doet het zonder HTTP verzoek, wat een snellere aanpak is.
Alles wat je moet doen is, je Sass bestand importeren met @ import commando naar een ander Sass bestand:
// Your main Sass file@import 'file';
@import 'anotherFile';.class {
// Your code
}
We hoeven de .scss extensies niet te gebruiken in het bestandspad, Sass zal het begrijpen.