Operatori in SASS

Questo articolo spiega gli operatori in SASS.

Spiegheremo gli operatori in SASS con esempi pratici.

YouTube Video

Operatori in SASS

Gli operatori SASS includono operazioni numeriche, operazioni di confronto, operazioni logiche e manipolazioni di stringhe.

Operazioni aritmetiche (addizione, sottrazione, moltiplicazione, divisione, modulo)

SASS supporta l'aritmetica standard, ma la divisione / può confondersi con quella di CSS, quindi è consigliato usare math.div(). I numeri possono avere delle unità e le operazioni sono possibili solo tra unità compatibili.

Di seguito sono riportati esempi di aritmetica semplice e dell'uso del modulo math.

 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}

• Questo codice è un esempio di addizione e moltiplicazione con l'unità px, e divisione usando math.div().
• Unità incompatibili come 10px + 2em genereranno un errore o risultati indesiderati. Unifica le unità oppure usa le funzioni unit() e unitless().

Gestione e conversione automatica delle unità

SASS gestisce i numeri con unità e le regole delle unità nei risultati dei calcoli seguono le regole fisiche generali. Ad esempio, px/px diventa senza unità. Fai attenzione alla gestione delle unità quando usi la funzione unit() o dopo math.div().

Di seguito sono riportati esempi su come gestire valori con e senza unità.

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

• Moltiplicare valori con e senza unità funziona come previsto, ma fai attenzione all'unità risultante (o alla sua assenza) durante la divisione.

Operatori di confronto (==, !=, <, >, <=, >=)

SASS dispone di operatori di confronto, utilizzabili nelle ramificazioni con condizionali (@if) e mixin. Il confronto di tipi complessi come colori e liste segue regole proprie. Nota che i confronti dei colori variano a seconda dello spazio colore.

Di seguito un esempio che confronta due numeri e varia lo stile.

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

• Gli operatori di confronto possono essere combinati con @if per regole di stile responsive e condizionali.

Operazioni logiche (and, or, not)

SASS supporta and, or e not. Usa and/or per combinare più condizioni. Precedenza e ordine di valutazione possono essere resi espliciti usando parentesi.

Di seguito un esempio di gestione di condizioni complesse con operatori logici.

 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}

• La precedenza tra and e or può essere chiarita con le parentesi. Per condizioni complesse, usare parentesi aiuta a mantenere leggibilità e sicurezza.

Operazioni sulle stringhe — Concatenazione e interpolazione

In SASS, la concatenazione di stringhe può essere fatta usando + o l'interpolazione #{}. Il risultato dell'operatore + dipende dal fatto che la stringa a sinistra sia con o senza virgolette, quindi l'utilizzo dell'interpolazione prevedibile #{} è più sicuro.

Di seguito sono riportati esempi di concatenazione e interpolazione.

 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}

• Utilizzando l'interpolazione #{} si evitano problemi con le virgolette e l'inserimento involontario di spazi.

Aritmetica sui colori (deprecata)

In passato, SASS supportava l'‘aritmetica dei colori’, che permetteva di sommare o sottrarre numeri ai colori. Tuttavia, questa funzione è ormai deprecata e dovresti utilizzare le funzioni del modulo sass:color per manipolare i colori.

Di seguito sono riportati esempi che mostrano come l'aritmetica diretta sui colori sia deprecata e quali alternative adottare.

 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}

• Se vuoi manipolare i colori, usa le funzioni del modulo sass:color.

Parentesi e precedenza degli operatori

Usa le parentesi per controllare l'ordine di valutazione nelle operazioni. Le parentesi sono sempre valutate prima delle operazioni all'esterno. Usa le parentesi nelle espressioni complesse per mantenere la leggibilità.

Di seguito sono riportati esempi per chiarire l'ordine di valutazione con le parentesi.

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

• Come in matematica, valgono le regole di precedenza, quindi utilizza le parentesi per garantire che i calcoli avvengano nell'ordine desiderato.

Riepilogo

Quando si utilizzano operatori in SASS, è importante scrivere codice pensando alla compatibilità futura e alla leggibilità. Nelle espressioni complesse, chiarisci l'ordine dei calcoli usando le parentesi e dai priorità alla leggibilità del codice.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video