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
Fantastisk!
Completion rate forbedret til 2.08Utfø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!
