Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Laskutoimitusten Suorittaminen Sass-numeraalioperaattoreilla | CSS-Esiprosessorit ja Sass
Edistyneet CSS-tekniikat

bookLaskutoimitusten 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 */
}
question mark

Valitse oikea väittämä.

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 7. Luku 4

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.04

bookLaskutoimitusten 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 */
}
question mark

Valitse oikea väittämä.

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 7. Luku 4
some-alt