Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Esecuzione di Calcoli con Operatori Numerici Sass | Preprocessori CSS e Sass
Tecniche CSS Avanzate

bookEsecuzione 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 */
}
question mark

Seleziona l'affermazione corretta.

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 7. Capitolo 4

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

Can you explain why units must match for addition and subtraction in Sass?

What happens if I try to multiply two values with units in Sass?

Can you show more examples of using variables in Sass calculations?

Awesome!

Completion rate improved to 2.04

bookEsecuzione di Calcoli con Operatori Numerici Sass

Scorri per mostrare il menu

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 */
}
question mark

Seleziona l'affermazione corretta.

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 7. Capitolo 4
some-alt