Esecuzione di Calcoli con Operatori Numerici Sass

Possiamo eseguire calcoli matematici sui numeri. Sass supporta tutte le operazioni aritmetiche di base come addizione (+), sottrazione (-), moltiplicazione (*) e divisione (/).

width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */

Per l'addizione e la sottrazione, è importante che i valori abbiano le stesse unità (ad esempio, %, px).

animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */

Per la moltiplicazione e la divisione, è fondamentale che uno dei valori sia senza unità. Sass non può calcolare la divisione di pixel o percentuali.

Operazioni matematiche con variabili

Possiamo facilmente includere variabili nei calcoli se la variabile ha un valore valido.

Immaginiamo di dover aggiungere un margine doppio all'elemento:

$defaultMargin: 30px;

.item {
  margin: $defaultMargin * 2; /* Result is 60px */
}