Operatorer i SASS

Denne artikkelen forklarer operatorer i SASS.

Vi vil forklare operatorer i SASS med praktiske eksempler.

YouTube Video

Operatorer i SASS

SASS-operatører inkluderer numeriske operasjoner, sammenligningsoperasjoner, logiske operasjoner og strengmanipulering.

Aritmetiske operasjoner (addisjon, subtraksjon, multiplikasjon, divisjon, modulus)

SASS støtter vanlige aritmetiske operasjoner, men divisjon / kan forveksles med CSS sin /, derfor anbefales det å bruke math.div(). Tall kan ha enheter, og operasjoner er kun mulig mellom kompatible enheter.

Nedenfor er eksempler på enkel aritmetikk og bruk av math-modulen.

 1@use "sass:math";
 2
 3$base: 16px;
 4$gutter: 8px;
 5
 6/* Addition and multiplication (allowed since both units are px) */
 7.container {
 8  width: $base + $gutter * 3; // -> 40px
 9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13  padding: math.div($base, 2); // -> 8px
14}

• Denne koden er et eksempel på addisjon og multiplikasjon med px-enheten, samt divisjon ved bruk av math.div().
• Inkompatible enheter som 10px + 2em vil gi en feil eller uventede resultater. Foren enhetene eller bruk funksjonene unit() og unitless().

Håndtering og automatisk konvertering av enheter

SASS håndterer tall med enheter, og enhetsreglene for resultatet følger generelle fysiske regler. For eksempel vil px/px bli uten enhet. Vær oppmerksom på enhetshåndtering når du bruker unit()-funksjonen eller etter math.div().

Under ser du eksempler på hvordan du håndterer blanding av verdier med og uten enhet.

1$width: 100px;
2$ratio: 0.5;
3
4.box {
5  /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6  width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */

• Multiplikasjon mellom verdier med og uten enhet fungerer som forventet, men vær obs på hvilken enhet (eller mangel på enhet) som oppstår ved divisjon.

Sammenligningsoperatorer (==, !=, <, >, <=, >=)

SASS har sammenligningsoperatorer, som kan brukes til forgrening i betingelser (@if) og mixins. Sammenligning av komplekse typer som farger og lister følger sine egne regler. Merk at fargesammenligning varierer mellom ulike fargerom.

Her er et eksempel som sammenligner to tall og forgreiner stilen.

1$breakpoint: 768px;
2
3.container {
4  @if $breakpoint >= 768px {
5    max-width: 1200px;
6  } @else {
7    max-width: 100%;
8  }
9}

• Sammenligningsoperatorer kan kombineres med @if for responsive og betingede stil-regler.

Logiske operasjoner (and, or, not)

SASS støtter and, or og not. Bruk and/or for å kombinere flere betingelser. Prioritetsrekkefølge og evalueringsrekkefølge kan tydeliggjøres med parenteser.

Her er et eksempel på hvordan man håndterer komplekse betingelser med logiske operatorer.

 1$mobile: false;
 2$logged-in: true;
 3
 4.notice {
 5  @if $logged-in and not $mobile {
 6    display: block;
 7  } @else {
 8    display: none;
 9  }
10}

• Rekkefølgen mellom and og or kan klargjøres med parenteser. Ved komplekse betingelser hjelper parenteser med å bevare lesbarheten og sikkerheten.

Strengoperasjoner — Konkatenering og interpolasjon

I SASS kan strengkonkatenering gjøres ved å bruke + eller #{}-interpolasjon. Resultatet av +-operatoren avhenger av om venstre streng er sitert eller ikke, så det er tryggere å bruke forutsigbar #{}-interpolasjon.

Her er eksempler på konkatenering og interpolasjon.

 1@use "sass:string";
 2
 3$base: "icon-";
 4$variant: string.unquote("arrow");
 5
 6.icon {
 7  /* Concatenation using + (old style) */
 8  &--old { content: $base + $variant; } // -> icon-arrow
 9
10  /* Interpolation is more reliable */
11  &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16  from { transform: translateX(0); }
17  to   { transform: translateX(100%); }
18}

• Interpolasjon med #{} unngår problemer med anførselstegn og utilsiktet innsetting av mellomrom.

Fargearitmetikk (utgått)

Tidligere støttet SASS 'fargearitmetikk', som gjorde det mulig å legge til eller trekke fra tall fra farger. Nå er fargearitmetikk utfaset, og du bør bruke funksjoner fra sass:color-modulen for å manipulere farger.

Her er eksempler som viser at direkte fargearitmetikk er utgått, samt foreslåtte alternativer.

 1/* Deprecated (old code example – no longer works or recommended) */
 2/* background: $base-color + 10; */
 3
 4@use "sass:color";
 5
 6$base: #336699;
 7
 8.bg {
 9  /* For example, to increase lightness, use color.scale() or color.adjust() */
10  /* Safe manipulation based on color space */
11  background: color.scale($base, $lightness: 20%);
12  /* Or make it lighter by mixing white */
13  background: color.mix(white, $base, 20%);
14}

• Hvis du vil manipulere farger, bruk funksjoner fra sass:color-modulen.

Parenteser og operatorprioritet

Bruk parenteser for å styre evalueringsrekkefølgen i operasjoner. Parenteser evalueres alltid før operasjoner utenfor dem. Bruk parenteser i komplekse uttrykk for å bevare lesbarheten.

Her er eksempler på hvordan parenteser tydeliggjør evalueringsrekkefølgen.

1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3;   // 7 (multiplication first)

• Som i matematikk gjelder prioritet, så bruk parenteser for å sikre at utregningene skjer i ønsket rekkefølge.

Sammendrag

Når du bruker operatorer i SASS, er det viktig å skrive kode med tanke på fremtidig kompatibilitet og lesbarhet. I komplekse uttrykk bør du klargjøre utregningsrekkefølgen med parenteser, og prioritere lesbarhet i koden.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video