Utföra Beräkningar med Sass Numeriska Operatorer
Vi kan utföra matematiska beräkningar på tal. Sass stöder all grundläggande aritmetik såsom addition (+), subtraktion (-), multiplikation (*) och division (/).
width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */
För addition och subtraktion är det viktigt att värdena har samma enheter (t.ex. %, px).
animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */
För multiplikation och division är det avgörande att ett av värdena är utan enhet. Sass kan inte beräkna division av pixlar eller procenttal.
Matematiska operationer med variabler
Vi kan enkelt använda variabler i beräkningarna om variabeln har ett giltigt värde.
Anta att vi behöver lägga till en dubbel marginal till objektet:
$defaultMargin: 30px;
.item {
margin: $defaultMargin * 2; /* Result is 60px */
}
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
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.08Utföra Beräkningar med Sass Numeriska Operatorer
Svep för att visa menyn
Vi kan utföra matematiska beräkningar på tal. Sass stöder all grundläggande aritmetik såsom addition (+), subtraktion (-), multiplikation (*) och division (/).
width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */
För addition och subtraktion är det viktigt att värdena har samma enheter (t.ex. %, px).
animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */
För multiplikation och division är det avgörande att ett av värdena är utan enhet. Sass kan inte beräkna division av pixlar eller procenttal.
Matematiska operationer med variabler
Vi kan enkelt använda variabler i beräkningarna om variabeln har ett giltigt värde.
Anta att vi behöver lägga till en dubbel marginal till objektet:
$defaultMargin: 30px;
.item {
margin: $defaultMargin * 2; /* Result is 60px */
}
Tack för dina kommentarer!
