Felhantering i SASS

Den här artikeln förklarar felhantering i SASS.

Vi kommer att förklara hur man bygger robusta stil-designer genom att använda SASS:s funktioner för fel, varningar och felsökning.

YouTube Video

Felhantering i SASS

Vad är 'Felhantering' i SASS?

SASS är inte ett språk som hanterar runtime-undantag, men det tillhandahåller en mekanism för att upptäcka ogiltiga tillstånd vid kompilering och tydligt informera utvecklaren. Detta hjälper till att förhindra att felaktiga värden eller design-misstag skrivs ut som CSS utan att någon märker det.

I SASS handlar felhantering inte bara om att 'stoppa när något misslyckas', utan fungerar också som ett sätt att uttrycka designantaganden direkt i koden. Det finns huvudsakligen fyra metoder för detta.

Stoppar genast kompileringen när ett tillstånd som inte är tillåtet enligt designen upptäcks.

Meddelar problem som varningar, men kompileringen fortsätter ändå.

Skriver ut variabler och beräkningsresultat för att hjälpa till att bekräfta flödet av värden och det interna tillståndet.

• Skyddsvillkor (@if) Kontrollerar indata och förutsättningar i förväg för att förhindra problem innan de uppstår.

@error: Stoppar dödliga fel på ett tillförlitligt sätt

Använd @error för tillstånd som är helt oacceptabla i din design. Om ett felaktigt värde skickas in misslyckas kompileringen omedelbart.

1@mixin set-width($width) {
2  @if type-of($width) != number {
3    @error "Width must be a number.";
4  }
5
6  width: $width;
7}

• Den här mixinen stoppar bygget om något annat än ett tal skickas till den. Detta är mycket effektivt som ett 'sista skydd' för att förhindra oönskad användning.

Praktisk användning av @error, inklusive enhetskontroll

Även om det är ett tal kan en felaktig enhet vara problematisk. I SASS kan du använda unit() för att kontrollera enheter.

1@mixin set-padding($value) {
2  @if unit($value) != "px" {
3    @error "Padding must be specified in px.";
4  }
5
6  padding: $value;
7}

• På så sätt kan du omedelbart upptäcka om du av misstag skickar t.ex. 1rem eller %. Det är viktigt att du kan genomdriva designregler som kod.

@warn: För avvecklingsmeddelanden och varningar

@warn används för att meddela om oönskade tillstånd som inte omedelbart orsakar fel. Eftersom CSS fortfarande genereras är det lämpligt för gradvis migrering.

1@mixin legacy-color($color) {
2  @warn "legacy-color is deprecated. Use theme-color instead.";
3
4  color: $color;
5}

• Den här mixinen ger en varning utan att bryta befintlig kod. Det är särskilt effektivt vid refaktorering i stora projekt.

Mönster för att utfärda villkorliga varningar

Det blir mer praktiskt när det kombineras med kontroll av värdeintervall.

1@mixin set-opacity($value) {
2  @if $value < 0 or $value > 1 {
3    @warn "Opacity should be between 0 and 1.";
4  }
5
6  opacity: $value;
7}

• Du kan meddela om designfel utan att stoppa utvecklingen. Styrkan med @warn är att du kan välja 'nivå av strikthet'.

@debug: Visualisera värdeflödet

@debug är mer ett observationsverktyg för att identifiera problem än för klassisk felhantering. Du kan kontrollera beräkningsresultat och variablers innehåll.

1$base-size: 8px;
2$spacing: $base-size * 3;
3
4@debug $spacing;

• Eftersom värdena skrivs ut vid kompilering hjälper det till att verifiera komplex beräkningslogik. Lämna det inte kvar i produktionskod; begränsa användningen till felsökning.

Att skydda designen med @if är viktigast

I praktiken är det viktigast att designa för att validera indata i förväg—innan du tar till @error eller @warn.

1@mixin grid-columns($count) {
2  @if type-of($count) != number or $count <= 0 {
3    @error "Column count must be a positive number.";
4  }
5
6  grid-template-columns: repeat($count, 1fr);
7}

• Genom att uttryckligen ange 'korrekta förutsättningar' som detta blir dina mixins och funktioner självförklarande.

Felhantering i funktioner (@function)

Du kan hantera fel på samma sätt i funktioner. Detta är särskilt viktigt i beräkningslogik.

1@function divide($a, $b) {
2  @if $b == 0 {
3    @error "Division by zero is not allowed.";
4  }
5
6  @return $a / $b;
7}

• Eftersom du kan upptäcka trasig logik innan CSS genereras, förbättras säkerheten i ditt designsystem.

Riktlinjer för användning i praktiken

Avslutningsvis, låt oss sammanfatta kriterier för att välja mellan dessa, med fokus på punkter som ofta är svåra att avgöra i praktiken.

• När ett designbrott eller en bugg tydligt har fastställts Använd @error. Eftersom generering av CSS i ett felaktigt tillstånd leder direkt till fel, stoppas kompileringen omedelbart.

• När du vill meddela om avveckling eller bara ge en varning Använd @warn. Du kan fortsätta utan att bryta befintlig kod eller kod under migrering, samtidigt som du informerar om framtida problem.

• När du vill bekräfta värdeflöden eller beräkningsresultat Använd @debug. Det är effektivt som ett tillfälligt medel för att verifiera logik eller leta efter orsaker.

• När du vill validera alla förutsättningar, såsom indata eller användningsvillkor Använd skydd med @if. Genom att uttryckligen ange antaganden kan du förhindra problem innan de uppstår.

Eftersom SASS är ett språk där du 'kan skriva nästan vad som helst', leder en design som tydligt definierar oönskade tillstånd i koden till mer underhållbara och mindre felbenägna stilar på lång sikt.

Sammanfattning

Felhantering i SASS är en mekanism för att tydligt uttrycka och kontinuerligt genomdriva antaganden och regler för stildesign i kod.

• Fel finns så att ogiltiga tillstånd inte passerar obemärkt och kan stoppas tillförlitligt på plats.
• Varningar fungerar som vägledning för att säkert göra framtida ändringar eller migrationer utan att allt går sönder direkt.
• Skydd är till för att designa så att problem inte uppstår från början, snarare än att hantera dem i efterhand.

Genom att förstå och använda dessa på rätt sätt blir SASS inte bara en utökning av CSS, utan också ett mycket tillförlitligt designspråk som kan uttrycka avsikt och begränsningar.

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