Operatoren in SASS

Dit artikel legt de operatoren in SASS uit.

We leggen de operatoren in SASS uit met praktische voorbeelden.

YouTube Video

Operatoren in SASS

SASS-operatoren omvatten numerieke bewerkingen, vergelijkingsbewerkingen, logische bewerkingen en stringmanipulaties.

Rekenkundige bewerkingen (optellen, aftrekken, vermenigvuldigen, delen, modulus)

SASS ondersteunt standaard rekenkunde, maar de deling / kan verwarrend zijn met de / van CSS, dus het gebruik van math.div() wordt aanbevolen. Getallen kunnen een eenheid hebben en bewerkingen zijn alleen mogelijk tussen compatibele eenheden.

Hieronder staan voorbeelden van eenvoudige rekenkundige bewerkingen en het gebruik van de math-module.

 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}

• Deze code is een voorbeeld van optellen en vermenigvuldigen met de px-eenheid, en delen met behulp van math.div().
• Incompatibele eenheden zoals 10px + 2em geven een fout of onverwachte resultaten. Verenig eenheden of gebruik de functies unit() en unitless().

Behandeling en automatische conversie van eenheden

SASS verwerkt getallen met eenheden, en de eenheidsregels voor de resultaten volgen algemene natuurkundige regels. Bijvoorbeeld, px/px wordt zonder eenheden. Wees voorzichtig met eenhedenbeheer bij gebruik van de functie unit() of na math.div().

Hieronder staan voorbeelden om te laten zien hoe je eenheden met of zonder eenheden combineert.

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

• Het vermenigvuldigen van waarden met en zonder eenheden werkt zoals verwacht, maar wees voorzichtig met de resulterende eenheid (of het ontbreken ervan) bij delen.

Vergelijkingsoperatoren (==, !=, <, >, <=, >=)

SASS heeft vergelijkingsoperatoren die gebruikt kunnen worden voor vertakkingen in conditionele uitspraken (@if) en mixins. Vergelijkingen van complexe typen zoals kleuren en lijsten volgen hun eigen regels. Merk op dat kleurvergelijkingen verschillen afhankelijk van de kleurruimte.

Hieronder volgt een voorbeeld waarin twee getallen worden vergeleken en de stijl wordt vertakt.

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

• Vergelijkingsoperatoren kunnen worden gecombineerd met @if voor responsieve en conditionele stijlregels.

Logische bewerkingen (and, or, not)

SASS ondersteunt and, or en not. Gebruik and/or om meerdere condities te combineren. Prioriteit en evaluatievolgorde kunnen expliciet worden gemaakt met haakjes.

Hieronder staat een voorbeeld van het verwerken van complexe voorwaarden met logische operatoren.

 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}

• De prioriteit van and en or kan worden verduidelijkt met haakjes. Bij complexe voorwaarden helpen haakjes om de leesbaarheid en veiligheid te behouden.

Tekenreeksbewerkingen — Concatenatie en interpolatie

In SASS kan tekenreeksconcatenatie worden gedaan met + of #{}-interpolatie. Het resultaat van de +-operator hangt af van of de linker tekenreeks met aanhalingstekens is of niet, dus het gebruik van voorspelbare #{}-interpolatie is veiliger.

Hieronder staan voorbeelden van concatenatie en interpolatie.

 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}

• Het gebruik van interpolatie #{} voorkomt problemen met aanhalingstekens en ongewenste witruimte.

Rekenkundige bewerkingen op kleuren (afgeschaft)

In het verleden ondersteunde SASS 'kleurrekenen', waarmee je getallen aan kleuren kon toevoegen of aftrekken. Kleurrekenen is echter nu verouderd en je dient functies uit de sass:color-module te gebruiken om kleuren te bewerken.

Hieronder staan voorbeelden die laten zien dat directe bewerkingen op kleuren zijn afgeschaft, en de voorgestelde alternatieven.

 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}

• Als je kleuren wilt bewerken, gebruik dan functies uit de sass:color-module.

Haakjes en operatorprioriteit

Gebruik haakjes om de volgorde van uitvoering bij operaties te bepalen. Haakjes worden altijd geëvalueerd vóór bewerkingen daarbuiten. Gebruik haakjes in complexe expressies om de leesbaarheid te behouden.

Hieronder staan voorbeelden die de volgorde van evaluatie verduidelijken met haakjes.

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

• Net als in de wiskunde gelden prioriteitsregels, dus gebruik haakjes om zeker te zijn dat berekeningen in de juiste volgorde plaatsvinden.

Samenvatting

Bij het gebruik van operatoren in SASS is het belangrijk om code te schrijven met toekomstige compatibiliteit en leesbaarheid in gedachten. In complexe expressies, verduidelijk de berekeningsvolgorde met haakjes en geef codeleesbaarheid prioriteit.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video