SASS-functies

Dit artikel legt SASS-functies uit.

We leggen SASS-functies grondig uit, van basis tot geavanceerde onderwerpen, inclusief praktische voorbeelden die nuttig zijn in de praktijk.

YouTube Video

SASS-functies

SASS-functies zijn krachtige hulpmiddelen die herbruikbare logica in stylesheets kapselen en stellen je in staat om berekeningen, opmaak en conditionele vertakkingen uit te voeren.

Basisstructuur en gebruik van functies

SASS-functies worden gedefinieerd met @function en geven een waarde terug met @return. Functies worden op dezelfde manier aangeroepen als ingebouwde functies.

1// Example: Define a simple function that doubles a value
2@function double($n) {
3  @return $n * 2;
4}
5
6// Use the function
7.example {
8  width: double(10px);  // -> 20px
9}

• Deze code definieert een functie die een getal verdubbelt en dit toepast op de breedte. Hierdoor wordt .example { width: 20px; } gegenereerd.

Argumenten, standaardwaarden en typeafhandeling

Functies kunnen meerdere argumenten accepteren en standaardwaarden instellen. SASS dwingt geen statische types af, maar aandacht besteden aan argumentformaten maakt je functies robuuster.

1// Example: Function with default parameters
2@function responsive-font($base-size, $scale: 1.2, $unit: px) {
3  @return $base-size * $scale + $unit;
4}
5
6.title {
7  font-size: responsive-font(16, 1.25);  // -> 20px
8}

• responsive-font heeft standaardwaarden voor scale en unit, en sommige argumenten kunnen worden weggelaten bij het aanroepen. In dit voorbeeld zal een waarde zoals font-size: 20px; worden weergegeven.

Gebruik van variadische argumenten (...)

Gebruik variadische argumenten als je meerdere waarden wilt doorgeven. Dit is handig voor het omgaan met lijsten of meerdere kleuren.

 1// Example: Sum any number of numbers passed in
 2@function sum-all($numbers...) {
 3  $total: 0;
 4  @each $n in $numbers {
 5    $total: $total + $n;
 6  }
 7  @return $total;
 8}
 9
10.box {
11  padding: sum-all(4px, 6px, 10px);  // -> 20px
12}

• Een variadisch argument zoals $numbers... wordt behandeld als een lijst en kan worden verwerkt met @each. In dit voorbeeld zal padding: 20px; worden weergegeven.

Lijsten of mappen retourneren en manipuleren

Functies kunnen ook lijsten (met spaties of komma’s gescheiden) en mappen retourneren. Dit is handig voor het retourneren van complexe waarden.

 1@use "sass:map";
 2
 3// Example: Return a map of spacing scale
 4@function spacing-scale($base) {
 5  @return (
 6    'small': $base * 0.5,
 7    'medium': $base,
 8    'large': $base * 2
 9  );
10}
11
12$scale: spacing-scale(8px);
13
14.card {
15  margin-bottom: map.get($scale, 'medium');
16}

• Een map wordt door de functie geretourneerd en daarna worden de waarden opgehaald met map.get. Hierdoor kun je een consistent afstandssysteem behouden.

Functies met conditionals en lussen

@if, @else if, @else, @for, @each en @while kunnen allemaal binnen functies worden gebruikt. Je kunt rekenlogica maken met conditionals en lussen.

 1// Example: Generate modular scale value using loop
 2@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
 3  $result: $base;
 4  @if $step == 0 {
 5    @return $result;
 6  }
 7  @if $step > 0 {
 8    @for $i from 1 through $step {
 9      $result: $result * $ratio;
10    }
11  } @else {
12    @for $i from 1 through abs($step) {
13      $result: $result / $ratio;
14    }
15  }
16  @return $result;
17}
18
19.h1 {
20  font-size: modular-scale(3, 1rem, 1.333);
21}

• Deze functie berekent een modulaire schaal en vermenigvuldigt of deelt afhankelijk van positieve of negatieve stappen. modular-scale(3, 1rem, 1.333) retourneert een lettergrootte drie stappen boven de basis.

Foutafhandeling en waarschuwingen (@error, @warn)

Je kunt afbreken met @error bij ongeldige argumenten of onverwachte bewerkingen, en waarschuwingen geven met @warn. Het doel is om gebruikers vroeg te waarschuwen voor problemen.

 1@use "sass:math";
 2@use "sass:meta";
 3
 4// Example: Validate input and throw an error for invalid units
 5@function ensure-length($value) {
 6  @if meta.type-of($value) != 'number' or math.is-unitless($value) {
 7    @error "Expected a length with units, got #{$value}.";
 8  }
 9  @return $value;
10}
11
12// Valid input (should pass)
13.test-valid {
14  width: ensure-length(10px); // expect: 10px
15}
16
17// Invalid input (should throw error during compilation)
18// Uncomment the following to test error handling:
19//
20// .test-invalid {
21//   // expect error: "Expected a length with units, got 10."
22//   width: ensure-length(10);
23// }

• Als je ongeldige waarden doorgeeft, wordt er tijdens het bouwen een fout weergegeven, waardoor het gemakkelijker wordt om de oorzaak te identificeren. Controles binnen functies zijn nuttig voor vroege bugdetectie.

Kleur-specifieke functies maken

In SASS kun je verschillende functies die kleuren bewerken combineren om je eigen kleurenpalet te maken. Dit is handig om een consistent kleurenschema in je hele project te beheren.

 1@use "sass:color";
 2@use "sass:list";
 3
 4// Example: Generate a color palette (tints and shades) from a base color
 5@function palette($color, $steps: 5, $strength: 10%) {
 6  $colors: ();
 7  @for $i from 0 through $steps {
 8    $amount: $i * $strength;
 9    $shade: if($i == 0, $color, color.mix(black, $color, $amount));
10    $tint: color.mix(white, $color, $amount);
11    $colors: list.append($colors, $shade);
12    $colors: list.append($colors, $tint);
13  }
14  @return $colors;
15}
16
17$palette: palette(#3498db, 3, 15%);
18
19.btn {
20  background-color: list.nth($palette, 1);
21}

• In dit voorbeeld wordt color.mix gebruikt om tinten te maken door te mengen met zwart en nuances door te mengen met wit. De waarden worden in een lijst teruggegeven en kunnen worden benaderd met list.nth.

Let op prestaties en compileertijd

SASS-functies worden geëvalueerd tijdens het compileren. Zware lussen, diepe recursie of uitgebreide map-bewerkingen zullen de compileertijd vergroten. Houd functies klein en eenvoudig; overweeg complexe bewerkingen buiten SASS af te handelen, bijvoorbeeld in buildtools of preprocessors, indien nodig.

Praktische verzameling hulpfuncties

Hier zijn enkele veelgebruikte hulpfuncties. De code is ontworpen om direct bruikbaar te zijn in echte projecten.

 1@use "sass:math";
 2
 3// Example: Clamp a value between min and max
 4@function clamp-value($value, $min, $max) {
 5  @if $value < $min {
 6    @return $min;
 7  } @else if $value > $max {
 8    @return $max;
 9  }
10  @return $value;
11}
12
13// Example: Convert px to rem (with optional root size)
14@function px-to-rem($px, $root: 16px) {
15  @if math.unit($px) != "px" {
16    @error "px-to-rem requires a px value.";
17  }
18  @return ($px / $root) * 1rem;
19}

• clamp-value stelt boven- en ondergrenzen aan een waarde in, en px-to-rem zet pixelwaardes om naar rem. Beide vereenvoudigen processen die vaak voorkomen bij responsive design.

Kiezen tussen @function en mixins (@mixin)

Functies zijn gespecialiseerd in het retourneren van waarden, terwijl mixins CSS-blokken genereren. Als het resultaat van de logica één enkele eigenschapswaarde is, gebruik dan een functie; als het om een heel stijlblok gaat, gebruik dan een mixin.

 1// Example: Function returns a value
 2@function border-radius-value($size) {
 3  @return $size * 1px;
 4}
 5
 6// Example: Mixin outputs properties
 7@mixin rounded($size) {
 8  border-radius: border-radius-value($size);
 9  -webkit-border-radius: border-radius-value($size);
10}
11.card {
12  @include rounded(8);
13}

• Functies retourneren waarden zoals getallen of kleuren die je bij andere eigenschappen gebruikt; mixins voegen direct groepen eigenschappen in. Strikte scheiding in het ontwerp verhoogt de onderhoudbaarheid.

Tekenreeksmanipulatie en aandachtspunten voor uitvoerformaat

Wees voorzichtig bij het werken met getallen met eenheden en strings in SASS. Het samenvoegen van een string met een getal met een eenheid kan ongewenste uitvoer opleveren. Gebruik unquote() of stringinterpolatie (#{}) indien nodig.

 1@use "sass:math";
 2
 3// Example: Safely create a CSS value string
 4@function px-percentage($px, $total) {
 5  $percent: math.div($px, $total) * 100;
 6  @return "#{$percent}%";
 7}
 8
 9// Safer with interpolation and math module
10@function px-percentage-safe($px, $total) {
11  $percent: math.div($px, $total) * 100;
12  // Round to 2 decimal places safely
13  $rounded: math.div(math.round($percent * 100), 100);
14  @return "#{$rounded}%";
15}

• Als je percentages als strings retourneert, beheer dan de precisie met interpolatie of round voor betere duidelijkheid. Om bugs te voorkomen, behandel datatypes altijd expliciet bij het samenvoegen van rekenresultaten met strings.

Best practices voor testen en documentatie

Maak na het schrijven van een functie kleine SCSS-bestanden met gebruiksvoorbeelden als testen; dit vergemakkelijkt het onderhoud. Je kunt voor elke functie het invoertype/-eenheid, het retourtype, het gedrag bij fouten en gebruiksvoorbeelden documenteren.

 1@use "sass:math";
 2
 3// Example: Inline "tests" (partial usage examples)
 4// These can be compiled separately during development
 5
 6@function double($n) {
 7  @return $n * 2;
 8}
 9
10@function px-to-rem($px, $root: 16px) {
11  @if math.unit($px) != "px" {
12    @error "px-to-rem requires a px value.";
13  }
14  @return math.div($px, $root) * 1rem;
15}
16
17// Test double()
18.test-double {
19  width: double(12px); // expect 24px
20}
21
22// Test px-to-rem()
23.test-rem {
24  font-size: px-to-rem(18px, 18px); // expect 1rem
25}
26
27// --- Inline debug tests ---
28@debug "double(12px) => #{double(12px)} (expect 24px)";
29@debug "px-to-rem(18px, 18px) => #{px-to-rem(18px, 18px)} (expect 1rem)";

• Het toevoegen van opmerkingen met kleine voorbeelden van 'verwachte uitvoer' maakt het makkelijker om regressies te herkennen bij toekomstige refactors. Automatisch compileren in een CI-omgeving en de uitvoer visueel controleren is effectief.

Samenvatting

SASS-functies zijn een krachtige manier om herbruikbaarheid en consistentie in stijlen te verbeteren. Ontwerp ze klein en eenvoudig, en zorg voor veiligheid door @error en @warn te gebruiken. Hulpfuncties voor kleur, afstanden en eenheidsconversie zijn handig om samen te voegen in een gedeelde bibliotheek. Om compile-overhead te vermijden, overweeg om complexe verwerking zo nodig in andere build-stappen onder te brengen.

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

YouTube Video