Operatorer i SASS

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

Vi kommer att förklara operatorer i SASS med praktiska exempel.

YouTube Video

Operatorer i SASS

SASS-operatorer inkluderar numeriska operationer, jämförelseoperationer, logiska operationer och strängmanipulationer.

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

SASS stöder vanliga aritmetiska operationer, men divisionen / kan förväxlas med CSS:s /, så det rekommenderas att använda math.div(). Tal kan ha enheter, och operationer är endast möjliga mellan kompatibla enheter.

Nedan finns exempel på enkel aritmetik och användning 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}

• Denna kod är ett exempel på addition och multiplikation med px-enheten samt division med math.div().
• Inkompatibla enheter som 10px + 2em leder till fel eller oväntade resultat. Enhetliggör enheter eller använd funktionerna unit() och unitless().

Hantering och automatisk konvertering av enheter

SASS hanterar tal med enheter, och enhetsreglerna för beräkningsresultaten följer generella fysiska regler. Till exempel blir px/px enhetslöst. Var försiktig med enhetshanteringen när du använder funktionen unit() eller efter math.div().

Nedan finns exempel på hur man hanterar blandning av värden med och utan enheter.

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

• Att multiplicera värden med och utan enheter fungerar som förväntat, men var försiktig med den resulterande enheten (eller avsaknaden av enhet) vid division.

Jämförelseoperatorer (==, !=, <, >, <=, >=)

SASS har jämförelseoperatorer som kan användas för villkorlig förgrening (@if) och mixins. Jämförelse av komplexa typer som färger och listor följer sina egna regler. Observera att färgjämförelser skiljer sig beroende på färgrymd.

Nedan finns ett exempel som jämför två tal och förgrenar stilen.

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

• Jämförelseoperatorer kan kombineras med @if för responsiva och villkorliga stilregler.

Logiska operationer (and, or, not)

SASS stöder and, or och not. Använd and/or för att kombinera flera villkor. Prioritering och utvärderingsordning kan förtydligas med parenteser.

Nedan är ett exempel på hur man hanterar komplexa villkor med logiska 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}

• Prioriteringen för and och or kan förtydligas med parenteser. För komplexa villkor hjälper parenteser till att bibehålla läsbarhet och säkerhet.

Strängoperationer – konkatenering och interpolation

I SASS kan strängar konkateneras med hjälp av + eller #{}-interpolering. Resultatet av +-operatorn beror på om vänster sträng är citerad eller inte, så det är säkrare att använda den förutsägbara #{}-interpoleringen.

Nedan hittar du exempel på konkatenering och interpolation.

 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}

• Genom att använda #{}-interpolering undviks problem med citattecken och oavsiktliga blanksteg.

Färgaritmetik (föråldrat)

Tidigare stödde SASS 'färgaritmetik', vilket gjorde det möjligt att lägga till eller subtrahera tal till färger. Men färgaritmetik är nu föråldrat, och du bör använda funktioner från sass:color-modulen för att manipulera färger.

Nedan finns exempel som visar att direkt färgaritmetik är föråldrat samt föreslagna alternativ.

 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}

• Om du vill manipulera färger, använd funktioner från sass:color-modulen.

Parenteser och operatorprioritet

Använd parenteser för att styra utvärderingsordningen i operationer. Parenteser utvärderas alltid före operationer utanför dem. Använd parenteser i komplexa uttryck för att bibehålla läsbarheten.

Nedan finns exempel som tydliggör utvärderingsordning med parenteser.

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

• Precis som i matematik gäller prioriteringsregler, så använd parenteser för att säkerställa att beräkningar sker i avsedd ordning.

Sammanfattning

När du använder operatorer i SASS är det viktigt att skriva kod med framtida kompatibilitet och läsbarhet i åtanke. I komplexa uttryck, förtydliga beräkningsordning genom att använda parenteser och prioritera kodens läsbarhet.

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