Operatorer i SASS

Denne artikel forklarer operatorer i SASS.

Vi vil forklare operatorer i SASS med praktiske eksempler.

YouTube Video

Operatorer i SASS

SASS-operatorer omfatter numeriske operationer, sammenligningsoperationer, logiske operationer og strengmanipulationer.

Aritmetiske operationer (addition, subtraktion, multiplikation, division, modulus)

SASS understøtter standard aritmetik, men divisionen / kan forveksles med CSS's /, så det anbefales at bruge math.div(). Tal kan have enheder, og operationer er kun mulige mellem kompatible enheder.

Nedenfor er eksempler på simpel aritmetik og brugen af math-modulet.

 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 kode er et eksempel på addition og multiplikation med px-enheden og division ved hjælp af math.div().
• Inkompatible enheder som 10px + 2em vil resultere i en fejl eller utilsigtede resultater. Foren enhederne eller brug funktionerne unit() og unitless().

Håndtering og automatisk konvertering af enheder

SASS håndterer tal med enheder, og enhedsreglerne for beregningsresultater følger generelle fysiske principper. For eksempel bliver px/px uden enhed. Vær opmærksom på enhedshåndtering, når du bruger unit()-funktionen eller efter math.div().

Nedenfor er eksempler, der viser hvordan man håndterer blanding af værdier med og uden enhed.

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

• Multiplikation af værdier med og uden enhed fungerer som forventet, men vær opmærksom på den resulterende enhed (eller mangel herpå) ved division.

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

SASS har sammenligningsoperatorer, som kan bruges til forgrening i betingelser (@if) og mixins. Sammenligning af komplekse typer som farver og lister følger deres egne regler. Bemærk at farvesammenligninger kan variere afhængigt af farverummet.

Nedenfor er et eksempel, der sammenligner to tal og forgrener 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 stilarter.

Logiske operationer (and, or, not)

SASS understøtter and, or og not. Brug and/or til at kombinere flere betingelser. Prioritering og evalueringsrækkefølge kan gøres eksplicit med parenteser.

Nedenfor er et eksempel på håndtering af 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}

• Prioriteten af and og or kan præciseres med parenteser. For komplekse betingelser hjælper brugen af parenteser med at opretholde læsbarhed og sikkerhed.

Strengoperationer — Sammenkædning og Interpolering

I SASS kan strengsammenkædning udføres med + eller interpolering med #{}. Resultatet af +-operatoren afhænger af om venstre streng er citeret eller ej, så brug af forudsigelig #{}-interpolering er sikrere.

Nedenfor er eksempler på sammenkædning og interpolering.

 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}

• Brug af interpolering #{} undgår problemer med citationstegn og utilsigtet indsættelse af mellemrum.

Farvearitmetik (forældet)

Tidligere understøttede SASS 'farvearitmetik', hvilket gjorde det muligt at lægge tal til eller trække tal fra farver. Dog er farvearitmetik nu forældet, og du bør bruge funktionerne fra sass:color-modulet til at manipulere farver.

Nedenfor er eksempler, der viser at direkte farvearitmetik er forældet og foreslåede 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 farver, skal du bruge funktionerne fra sass:color-modulet.

Parenteser og operatorprioritet

Brug parenteser til at kontrollere rækkefølgen af evaluering i operationer. Parenteser evalueres altid før operationer udenfor dem. Brug parenteser i komplekse udtryk for at bevare læsbarheden.

Nedenfor er eksempler på at tydeliggøre evalueringsrækkefølgen med parenteser.

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

• Som med matematik gælder prioriteringsregler, så brug parenteser for at sikre at beregninger sker i den ønskede rækkefølge.

Sammendrag

Når du bruger operatorer i SASS, er det vigtigt at skrive kode med henblik på fremtidig kompatibilitet og læsbarhed. I komplekse udtryk, tydeliggør beregningsrækkefølgen med parenteser og prioriter kode-læsbarhed.

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