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
Awesome!
Completion rate improved to 2.04Utfö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!
