Laskutoimitusten Suorittaminen Sass-numeraalioperaattoreilla
Voimme suorittaa matemaattisia laskutoimituksia numeroilla. Sass tukee kaikkia peruslaskutoimituksia, kuten yhteenlaskua (+), vähennystä (-), kertolaskua (*) ja jakolaskua (/).
width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */
Yhteen- ja vähennyslaskussa on tärkeää, että arvoilla on samat yksiköt (esim. %, px).
animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */
Kerto- ja jakolaskussa on olennaista, että toinen arvoista on yksikötön. Sass ei voi laskea pikseleiden tai prosenttien jakolaskua.
Matemaattiset operaatiot muuttujilla
Voimme helposti käyttää muuttujia laskutoimituksissa, jos muuttujalla on kelvollinen arvo.
Kuvitellaan, että meidän täytyy lisätä tuplamarginaali elementille:
$defaultMargin: 30px;
.item {
margin: $defaultMargin * 2; /* Result is 60px */
}
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
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.04Laskutoimitusten Suorittaminen Sass-numeraalioperaattoreilla
Pyyhkäise näyttääksesi valikon
Voimme suorittaa matemaattisia laskutoimituksia numeroilla. Sass tukee kaikkia peruslaskutoimituksia, kuten yhteenlaskua (+), vähennystä (-), kertolaskua (*) ja jakolaskua (/).
width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */
Yhteen- ja vähennyslaskussa on tärkeää, että arvoilla on samat yksiköt (esim. %, px).
animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */
Kerto- ja jakolaskussa on olennaista, että toinen arvoista on yksikötön. Sass ei voi laskea pikseleiden tai prosenttien jakolaskua.
Matemaattiset operaatiot muuttujilla
Voimme helposti käyttää muuttujia laskutoimituksissa, jos muuttujalla on kelvollinen arvo.
Kuvitellaan, että meidän täytyy lisätä tuplamarginaali elementille:
$defaultMargin: 30px;
.item {
margin: $defaultMargin * 2; /* Result is 60px */
}
Kiitos palautteestasi!
