SASS-funksjoner
Denne artikkelen forklarer SASS-funksjoner.
Vi vil grundig forklare SASS-funksjoner fra grunnleggende til avanserte temaer, inkludert praktiske eksempler som er nyttige i det virkelige arbeidet.
YouTube Video
SASS-funksjoner
SASS-funksjoner er kraftige verktøy som kapsler inn gjenbrukbar logikk i stilark, og muliggjør beregninger, formatering og betinget forgrening.
Grunnstruktur og bruk av funksjoner
SASS-funksjoner defineres med @function og returnerer en verdi med @return. Funksjoner kalles på samme måte som innebygde funksjoner.
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 koden definerer en funksjon som dobler et tall og bruker det på bredden. Som et resultat vil
.example { width: 20px; }bli generert.
Argumenter, standardverdier og typehåndtering
Funksjoner kan ta imot flere argumenter og angi standardverdier. SASS håndhever ikke statisk typing, men å være oppmerksom på argumentformater gjør funksjonene dine mer 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-fonthar standardverdier forscaleogunit, og noen argumenter kan utelates ved bruk. I dette eksemplet vil en verdi somfont-size: 20px;bli skrevet ut.
Bruk av variadiske argumenter (...)
Bruk variadiske argumenter hvis du vil sende flere verdier. Dette er nyttig for å håndtere lister eller flere farger.
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 variadisk argument som
$numbers...behandles som en liste og kan bearbeides med@each. I dette eksemplet vilpadding: 20px;bli skrevet ut.
Returnering og manipulering av lister eller maps
Funksjoner kan også returnere lister (med mellomrom eller komma som separator) og maps. Dette er nyttig for å returnere komplekse verdier.
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 av funksjonen, og verdier hentes deretter med
map.get. Dette lar deg opprettholde et konsistent avstandssystem.
Funksjoner med betingelser og løkker
@if, @else if, @else, @for, @each og @while kan alle brukes inni funksjoner. Du kan lage beregningslogikk 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 funksjonen beregner en modulær skala og multipliserer eller dividerer avhengig av positive eller negative trinn.
modular-scale(3, 1rem, 1.333)returnerer en skriftstørrelse tre trinn over basisverdien.
Feilhåndtering og advarsler (@error, @warn)
Du kan avbryte med @error ved ugyldige argumenter eller uforutsette operasjoner, og sende ut advarsler med @warn. Hensikten er å varsle brukere om problemer tidlig.
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 gir ugyldige verdier, vil en feil bli skrevet ut ved bygging, slik at det blir lettere å finne årsaken. Sjekker inne i funksjoner er nyttige for tidlig feiloppdagelse.
Lage fargespesifikke funksjoner
I SASS kan du kombinere ulike funksjoner som manipulerer farger for å lage din egen fargepalett. Dette er nyttig for å håndtere et konsekvent fargesystem gjennom hele prosjektet ditt.
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 eksemplet brukes
color.mixfor å lage nyanser ved å blande med svart og toner ved å blande med hvitt. Verdiene returneres i en liste og kan nås ved å brukelist.nth.
Notater om ytelse og kompileringstid
SASS-funksjoner evalueres ved kompilering. Tunge løkker, dyp rekursjon eller omfattende map-operasjoner vil øke kompileringstiden. Hold funksjoner små og enkle; vurder å håndtere komplisert prosessering utenfor SASS, i byggverktøy eller preprosessorer om nødvendig.
Praktisk samling av nyttefunksjoner
Her er noen ofte brukte nyttefunksjoner. Koden er laget for å kunne brukes direkte i ekte prosjekter.
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-valuesetter øvre og nedre grense på en verdi, ogpx-to-remkonverterer pikselverdier til rem. Begge disse forenkler prosesser som ofte oppstår i responsiv design.
Valg mellom @function og mixins (@mixin)
Funksjoner er spesialisert på å returnere verdier, mens mixins skriver ut CSS-blokker. Hvis resultatet av logikken er en enkelt egenskapsverdi, bruk en funksjon; hvis det er en hel stilblokk, bruk 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}- Funksjoner returnerer verdier som tall eller farger til bruk i andre egenskaper, mens mixins setter inn grupper av egenskaper direkte. Streng adskillelse i utforming øker vedlikeholdbarheten.
Strengmanipulering og hensyn til utdataformat
Vær forsiktig når du håndterer tall med enheter og strenger i SASS. Sammenkobling av en streng til et tall med enhet kan gi uønsket utdata. Bruk unquote() eller strenginterpolering (#{}) ved 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 prosenter som strenger, styr presisjonen med interpolering eller
roundfor bedre klarhet. For å unngå feil, håndter alltid datatyper tydelig når du slår sammen beregningsresultater med strenger.
Beste praksis for testing og dokumentasjon
Etter å ha skrevet en funksjon, lag små SCSS-filer med brukseksempler som tester for å gjøre vedlikeholdet enklere. Du kan dokumentere for hver funksjon hvilken inndata-type/-enhet, returtype, feiloppførsel og brukseksempler.
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)";- Å legge igjen kommentarer med små eksempler på 'forventet utdata' gjør det lettere å se tilbakefall ved fremtidig omstrukturering. Å kompilere automatisk i et CI-miljø og visuelt sjekke utdataene er effektivt.
Sammendrag
SASS-funksjoner er en kraftig måte å øke gjenbruk og konsistens i stiler. Design dem til å være små og enkle, og sørg for sikkerhet med @error og @warn. Nyttefunksjoner for farge, avstand og enhetskonvertering er praktiske å samle i et delt bibliotek. For å unngå ekstra kompileringstid, vurder å skille ut kompleks prosessering til andre byggetrinn ved behov.
Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.