SASS-funktioner

Denna artikel förklarar SASS-funktioner.

Vi kommer att grundligt förklara SASS-funktioner från grunder till avancerade ämnen, inklusive praktiska exempel som är användbara i verkligt arbete.

YouTube Video

SASS-funktioner

SASS-funktioner är kraftfulla verktyg som kapslar in återanvändbar logik i stilmallar och möjliggör beräkningar, formatering och villkorsstyrd förgrening.

Grundläggande struktur och användning av funktioner

SASS-funktioner definieras med @function och returnerar ett värde med @return. Funktioner anropas på samma sätt som inbyggda 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}

• Denna kod definierar en funktion som dubblar ett tal och applicerar det på bredden. Som resultat kommer .example { width: 20px; } att genereras.

Argument, standardvärden och typ-hantering

Funktioner kan ta emot flera argument och ange standardvärden. SASS tillämpar inte statisk typning, men att vara noga med argumentformat gör dina funktioner mer robusta.

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ärden för scale och unit, och vissa argument kan utelämnas vid anropet. I det här exemplet kommer ett värde som font-size: 20px; att genereras.

Använda variadiska argument (...)

Använd variadiska argument om du vill skicka flera värden. Detta är användbart för att hantera listor eller flera färger.

 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}

• Ett variadiskt argument som $numbers... behandlas som en lista och kan bearbetas med @each. I det här exemplet kommer padding: 20px; att genereras.

Returnera och manipulera listor eller mappar

Funktioner kan även returnera listor (med mellanslag eller komma) och mappar. Detta är användbart för att returnera komplexa värden.

 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 kartläggning returneras av funktionen, och värden hämtas sedan med map.get. Detta gör det möjligt att upprätthålla ett konsekvent avståndssystem.

Funktioner med villkor och loopar

@if, @else if, @else, @for, @each och @while kan alla användas i funktioner. Du kan skapa beräkningslogik med villkor och loopar.

 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}

• Denna funktion beräknar en modulär skala och multiplicerar eller dividerar beroende på positiva eller negativa steg. modular-scale(3, 1rem, 1.333) returnerar en teckenstorlek tre steg över basen.

Felsökning och varningar (@error, @warn)

Du kan avbryta med @error vid ogiltiga argument eller oväntade operationer, och ge varningar med @warn. Syftet är att tidigt varna användare om problem.

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

• Om du skickar ogiltiga värden kommer ett fel att visas vid byggtid, vilket gör det lättare att identifiera orsaken. Kontroller inom funktioner är bra för tidig buggdetektering.

Skapa färgspecifika funktioner

I SASS kan du kombinera olika funktioner som manipulerar färger för att skapa din egen färgpalett. Detta är användbart för att hantera ett konsekvent färgschema i hela ditt 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 det här exemplet används color.mix för att skapa nyanser genom att blanda med svart och toner genom att blanda med vitt. Värdena returneras i en lista och kan nås med hjälp av list.nth.

Noteringar om prestanda och kompileringstid

SASS-funktioner utvärderas vid kompilering. Tunga loopar, djup rekursion eller omfattande mapp-operationer ökar kompileringstiden. Håll funktioner små och enkla; överväg att hantera komplex bearbetning utanför SASS, i byggverktyg eller preprocessorer om det behövs.

Praktisk samling av hjälpfunktioner

Här är några vanliga hjälpfunktioner. Koden är utformad för att kunna användas direkt i verkliga projekt.

 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 tillämpar övre och nedre gränser på ett värde, och px-to-rem konverterar pixlar till rem. Båda dessa förenklar processer som ofta uppstår i responsiv design.

Välja mellan @function och mixins (@mixin)

Funktioner är specialiserade på att returnera värden, medan mixins genererar CSS-block. Om resultatet av logiken är ett enskilt egenskapsvärde, använd en funktion; om det är ett helt stilblock, använd 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 returnerar värden som siffror eller färger för användning i andra egenskaper, medan mixins direkt infogar grupper av egenskaper. Strikt separation i design ökar underhållbarheten.

Strängmanipulation och formatöverväganden för utdata

Var försiktig när du hanterar tal med enheter och strängar i SASS. Att sammanfoga en sträng med ett tal och enhet kan ge oönskad utdata. Använd unquote() eller stränginterpolering (#{}) vid 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 returnerar procent som strängar, hantera precision med interpolation eller round för bättre tydlighet. För att undvika buggar, hantera alltid datatyper tydligt när du sammanfogar beräkningsresultat med strängar.

Bästa praxis för testning och dokumentation

Efter att ha skrivit en funktion, skapa små SCSS-filer med användningsexempel som test, vilket gör underhåll enklare. Du kan dokumentera för varje funktion vilka indata/typer, returtyper, felhantering och användningsexempel som gäller.

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

• Att lämna kommentarer med små exempel på 'förväntad utdata' gör det lättare att upptäcka regressioner vid framtida refaktorering. Att automatiskt kompilera i en CI-miljö och visuellt kontrollera utdata är effektivt.

Sammanfattning

SASS-funktioner är ett kraftfullt sätt att förbättra återanvändbarhet och konsekvens i stilar. Designa dem så att de är små och enkla, och säkerställ trygghet med @error och @warn. Hjälpfunktioner för färg, avstånd och enhetskonvertering är smidiga att samla i ett gemensamt bibliotek. För att undvika kompileringstung belastning, överväg att lägga komplex bearbetning i andra byggsteg vid behov.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video