Udførelse af Beregninger med Sass Numeriske Operatorer
Vi kan udføre matematiske beregninger på tal. Sass understøtter alle grundlæggende aritmetiske operationer som addition (+), subtraktion (-), multiplikation (*) og division (/).
width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */
For addition og subtraktion er det vigtigt, at værdierne har samme enhed (f.eks. %, px).
animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */
For multiplikation og division er det afgørende, at én værdi er uden enhed. Sass kan ikke beregne division af pixels eller procenter.
Matematiske operationer med variabler
Vi kan nemt inddrage variabler i beregningerne, hvis variablen har en gyldig værdi.
Forestil dig, at vi skal tilføje en dobbelt margin til elementet:
$defaultMargin: 30px;
.item {
margin: $defaultMargin * 2; /* Result is 60px */
}
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
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.04Udførelse af Beregninger med Sass Numeriske Operatorer
Stryg for at vise menuen
Vi kan udføre matematiske beregninger på tal. Sass understøtter alle grundlæggende aritmetiske operationer som addition (+), subtraktion (-), multiplikation (*) og division (/).
width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */
For addition og subtraktion er det vigtigt, at værdierne har samme enhed (f.eks. %, px).
animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */
For multiplikation og division er det afgørende, at én værdi er uden enhed. Sass kan ikke beregne division af pixels eller procenter.
Matematiske operationer med variabler
Vi kan nemt inddrage variabler i beregningerne, hvis variablen har en gyldig værdi.
Forestil dig, at vi skal tilføje en dobbelt margin til elementet:
$defaultMargin: 30px;
.item {
margin: $defaultMargin * 2; /* Result is 60px */
}
Tak for dine kommentarer!
