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 */
}
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
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.04Esecuzione 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 */
}
Grazie per i tuoi commenti!
