SASS-variabelen

Dit artikel legt SASS-variabelen uit.

We geven een gedetailleerde uitleg over SASS-variabelen en leren hun werkelijke gebruik stap voor stap.

YouTube Video

SASS-variabelen

SASS is een uitbreidings­taal voor CSS waarmee je CSS flexibeler en efficiënter kunt schrijven. Onder de functies zijn variabelen een krachtig hulpmiddel om stijlconsistentie te behouden en veranderingen gemakkelijker te maken.

Wat zijn SASS-variabelen?

SASS-variabelen bieden een manier om waarden zoals kleuren, lettergroottes en ruimtes die vaak in CSS worden gebruikt, op te slaan zodat ze op één plek beheerd kunnen worden.

Door variabelen te gebruiken kun je eenvoudig stijlen wijzigen en de leesbaarheid van de code verbeteren.

Hoe variabelen te schrijven

Variabelen kunnen als volgt worden geschreven.

1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;

• Je moet de variabelenaam vooraf laten gaan door het $-symbool.
• variable-name is de naam van de variabele. Het is aanbevolen om het een duidelijke en beschrijvende naam te geven.
• value is de waarde die aan de variabele is toegekend.

Basisgebruik van variabelen

Hieronder staat een eenvoudig voorbeeld van een SASS-variabele.

 1// Variable definition
 2$primary-color: #3498db;
 3$secondary-color: #2ecc71;
 4$base-font-size: 16px;
 5
 6// Variable usage
 7body {
 8    font-size: $base-font-size;
 9    color: $primary-color;
10    background-color: $secondary-color;
11}

• Zodra je een variabele zoals $primary-color definieert, kun je dezelfde waarde zo vaak hergebruiken als je wilt.
• Bij het wijzigen van een waarde hoef je alleen de variabeledefinitie aan te passen, waardoor het onderhoud verbetert.

Gegenereerde CSS-uitvoer

1body {
2    font-size: 16px;
3    color: #3498db;
4    background-color: #2ecc71;
5}

Variabelen gebruiken binnen geneste selectoren

Het combineren van SASS-nesting met variabelen helpt om je code te organiseren en maakt het eenvoudiger te beheren.

 1@use "sass:color";
 2
 3// Variable definition
 4$button-bg: #e74c3c;
 5$button-color: #fff;
 6$button-padding: 10px 20px;
 7
 8.button {
 9    background-color: $button-bg;
10    color: $button-color;
11    padding: $button-padding;
12
13    &:hover {
14        background-color: color.adjust($button-bg, $lightness: -10%);
15    }
16}

• Je kunt variabelen gebruiken binnen geneste selectoren.
• Door variabelen te combineren kun je flexibel stylen, zoals een kleur 10% donkerder maken met behulp van de functie color.adjust.

Gegenereerde CSS-uitvoer

1.button {
2    background-color: #e74c3c;
3    color: #fff;
4    padding: 10px 20px;
5}
6
7.button:hover {
8    background-color: #c0392b;
9}

Variabelen met standaardwaarden

In SASS kun je standaardwaarden voor variabelen instellen. Door standaardwaarden in te stellen kun je variabelen gebruiken zonder bestaande te overschrijven.

1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8    font-size: $font-size;
9}

• Door !default toe te voegen wordt de variabele niet overschreven als deze al is gedefinieerd.
• Dit is handig bij teamontwikkeling of voor projectbrede instellingen.

Gegenereerde CSS-uitvoer

1p {
2    font-size: 16px;
3}

Bereik van variabelen

SASS-variabelen hebben een bereik en hun beschikbaarheid hangt af van waar ze gedefinieerd zijn. Het begrijpen van bereik helpt om onbedoeld overschrijven van variabelen te voorkomen.

1. Globaal bereik

1$global-color: #ff6347;
2
3.header {
4    color: $global-color;
5}

• Variabelen in het globale bereik zijn beschikbaar in het hele bestand.

2. Lokaal bereik

1.card {
2    $card-bg: #f0f0f0;
3    background-color: $card-bg;
4}
5
6.button {
7    // Error: $card-bg cannot be used
8    background-color: $card-bg;
9}

• Variabelen in het lokale bereik zijn alleen beschikbaar binnen een specifieke nesting of bestand.

Variabelen gebruiken in berekeningen

SASS-variabelen kunnen ook worden gebruikt in berekeningen. Berekeningen kunnen ook worden uitgevoerd op waarden met een eenheid en op kleuren.

 1@use "sass:color";
 2
 3$base-padding: 10px;
 4$double-padding: $base-padding * 2;
 5
 6.container {
 7    padding: $double-padding;
 8}
 9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14    color: $lighter-color;
15}

Gegenereerde CSS-uitvoer

1.container {
2    padding: 20px;
3}
4
5h1 {
6    color: #5dade2;
7}

• Het gebruik van variabelen voor kleurafstellingen of afstandsberekeningen verbetert het onderhoud.

Samenvatting

SASS-variabelen zijn een essentiële functie voor efficiënt CSS-beheer en onderhoud.

Het gebruik van SASS-variabelen helpt om consistente stijlen in het hele project te behouden en maakt aanpassingen eenvoudiger.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video