Utføre Beregninger med Sass Numeriske Operatorer
Vi kan utføre matematiske beregninger på tall. Sass støtter all grunnleggende aritmetikk som addisjon (+), subtraksjon (-), multiplikasjon (*) og divisjon (/).
width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */
For addisjon og subtraksjon er det viktig at verdiene har samme enhet (f.eks. %, px).
animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */
For multiplikasjon og divisjon er det avgjørende at én verdi er uten enhet. Sass kan ikke utføre divisjon på piksler eller prosenter.
Matematiske operasjoner med variabler
Vi kan enkelt bruke variabler i beregningene dersom variabelen har en gyldig verdi.
La oss tenke oss at vi trenger å legge til dobbel margin på elementet:
$defaultMargin: 30px;
.item {
margin: $defaultMargin * 2; /* Result is 60px */
}
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
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.04Utføre Beregninger med Sass Numeriske Operatorer
Sveip for å vise menyen
Vi kan utføre matematiske beregninger på tall. Sass støtter all grunnleggende aritmetikk som addisjon (+), subtraksjon (-), multiplikasjon (*) og divisjon (/).
width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */
For addisjon og subtraksjon er det viktig at verdiene har samme enhet (f.eks. %, px).
animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */
For multiplikasjon og divisjon er det avgjørende at én verdi er uten enhet. Sass kan ikke utføre divisjon på piksler eller prosenter.
Matematiske operasjoner med variabler
Vi kan enkelt bruke variabler i beregningene dersom variabelen har en gyldig verdi.
La oss tenke oss at vi trenger å legge til dobbel margin på elementet:
$defaultMargin: 30px;
.item {
margin: $defaultMargin * 2; /* Result is 60px */
}
Takk for tilbakemeldingene dine!
