SASS-funktioner

Denne artikel forklarer SASS-funktioner.

Vi vil grundigt forklare SASS-funktioner fra det grundlæggende til avancerede emner, inklusive praktiske eksempler, der er nyttige i virkeligt arbejde.

YouTube Video

SASS-funktioner

SASS-funktioner er kraftfulde værktøjer, der kapsler genanvendelig logik ind i stylesheets, hvilket muliggør beregninger, formatering og betingede grene.

Grundlæggende struktur og brug af funktioner

SASS-funktioner defineres med @function og returnerer en værdi med @return. Funktioner kaldes på samme måde som indbyggede funktioner.

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}

• Denne kode definerer en funktion, der fordobler et tal og anvender det på bredden. Som resultat vil .example { width: 20px; } blive genereret.

Argumenter, standardværdier og håndtering af typer

Funktioner kan acceptere flere argumenter og angive standardværdier. SASS håndhæver ikke statiske typer, men at være opmærksom på argumentformater gør dine funktioner mere robuste.

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 har standardværdier for scale og unit, og nogle argumenter kan udelades, når den kaldes. I dette eksempel vil en værdi som font-size: 20px; blive output.

Brug af variationære argumenter (...)

Brug variationære argumenter, hvis du vil videregive flere værdier. Dette er nyttigt til håndtering af lister eller flere farver.

 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}

• Et variationært argument som $numbers... behandles som en liste og kan bearbejdes ved hjælp af @each. I dette eksempel vil padding: 20px; blive output.

Returnering og manipulation af lister eller maps

Funktioner kan også returnere lister (med mellemrum eller komma separeret) og maps. Dette er nyttigt for at returnere komplekse værdier.

 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}

• En map returneres af funktionen, og derefter hentes værdier med map.get. Dette giver dig mulighed for at opretholde et konsekvent afstandssystem.

Funktioner med betingelser og løkker

@if, @else if, @else, @for, @each og @while kan alle bruges inde i funktioner. Du kan oprette beregningslogik med betingelser og løkker.

 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}

• Denne funktion beregner en modulær skala og ganger eller dividerer afhængig af positive eller negative trin. modular-scale(3, 1rem, 1.333) returnerer en skrifttype tre trin over basis.

Fejlhåndtering og advarsler (@error, @warn)

Du kan afbryde med @error ved ugyldige argumenter eller uventede operationer, og udstede advarsler med @warn. Formålet er at advare brugere om problemer tidligt.

 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// }

• Hvis du videregiver ugyldige værdier, vises en fejl under build-processen, hvilket gør det nemmere at identificere årsagen. Kontrol inde i funktioner er nyttige til tidlig fejlfinding.

Oprettelse af farvespecifikke funktioner

I SASS kan du kombinere forskellige funktioner, der manipulerer farver, for at skabe din egen farvepalette. Dette er nyttigt til at administrere et ensartet farveskema gennem hele dit projekt.

 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}

• I dette eksempel bruges color.mix til at skabe nuancer ved at blande med sort og toner ved at blande med hvid. Værdierne returneres i en liste og kan tilgås med list.nth.

Bemærkninger om ydeevne og kompileringstid

SASS-funktioner evalueres ved kompileringstidspunktet. Tunge løkker, dyb rekursion eller omfattende map-operationer vil øge kompileringstiden. Hold funktioner små og enkle; overvej at håndtere kompleks behandling uden for SASS, i byggemiljøer eller preprocessorer, hvis nødvendigt.

Praktisk samling af hjælpefunktioner

Her er nogle almindeligt anvendte hjælpefunktioner. Koden er lavet til at kunne bruges direkte i virkelige projekter.

 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 håndhæver øvre og nedre grænser for en værdi, og px-to-rem konverterer pixelværdier til rem. Begge disse forenkler processer, der ofte opstår i responsivt design.

Valg mellem @function og mixins (@mixin)

Funktioner er specialiserede i at returnere værdier, mens mixins genererer CSS-blokke. Hvis resultatet af logikken er en enkelt egenskabsværdi, brug en funktion; hvis det er en hel stilblok, brug en 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}

• Funktioner returnerer værdier såsom tal eller farver til brug i andre egenskaber, mens mixins direkte indsætter grupper af egenskaber. Strikt adskillelse i design øger vedligeholdelsesvenligheden.

Strengmanipulation og overvejelser om outputformat

Vær forsigtig, når du håndterer tal med enheder og strenge i SASS. Sammensætning af en streng og et tal med enhed kan give utilsigtet output. Brug unquote() eller strenginterpolering (#{}) efter behov.

 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}

• Når du returnerer procentdele som strenge, styr præcisionen med interpolering eller round for større klarhed. For at undgå fejl, håndter altid datatyper tydeligt, når du sammensætter beregningsresultater med strenge.

Bedste praksis for test og dokumentation

Efter at have skrevet en funktion, opret små SCSS-filer med brugseksempler som tests, hvilket gør vedligeholdelsen nemmere. Du kan dokumentere inputtype/-enhed, returtype, fejlopførsel og brugseksempler for hver funktion.

 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)";

• At tilføje kommentarer med små eksempler på 'forventet output' gør det nemmere at opdage regressioner ved fremtidig refaktorering. Automatisk kompilering i et CI-miljø og visuel kontrol af output er effektivt.

Sammendrag

SASS-funktioner er en kraftfuld måde at øge genanvendelighed og konsistens i styles. Design dem til at være små og enkle og sikr sikkerhed med @error og @warn. Hjælpefunktioner til farver, afstand og enhedskonvertering er komfortable at samle i et delt bibliotek. For at undgå kompileringsoverhead, overvej at separere kompleks behandling ud i andre build-trin, når det er nødvendigt.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video