Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Berekeningen Uitvoeren met Sass Numerieke Operatoren | CSS-Preprocessors en Sass
Geavanceerde CSS-Technieken

bookBerekeningen Uitvoeren met Sass Numerieke Operatoren

We kunnen wiskundige berekeningen uitvoeren op getallen. Sass ondersteunt alle basisrekenkunde zoals optellen (+), aftrekken (-), vermenigvuldigen (*) en delen (/).

width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */

Voor optellen en aftrekken is het belangrijk dat de waarden dezelfde eenheden hebben (bijv. %, px).

animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */

Voor vermenigvuldigen en delen is het essentieel dat één waarde geen eenheid heeft. Sass kan geen deling uitvoeren met pixels of percentages.

Wiskundige bewerkingen met variabelen

We kunnen eenvoudig variabelen betrekken bij de berekeningen als de variabele een geldige waarde heeft.

Stel dat we een dubbele marge aan het item willen toevoegen:

$defaultMargin: 30px;

.item {
  margin: $defaultMargin * 2; /* Result is 60px */
}
question mark

Selecteer de juiste uitspraak.

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 7. Hoofdstuk 4

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 2.04

bookBerekeningen Uitvoeren met Sass Numerieke Operatoren

Veeg om het menu te tonen

We kunnen wiskundige berekeningen uitvoeren op getallen. Sass ondersteunt alle basisrekenkunde zoals optellen (+), aftrekken (-), vermenigvuldigen (*) en delen (/).

width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */

Voor optellen en aftrekken is het belangrijk dat de waarden dezelfde eenheden hebben (bijv. %, px).

animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */

Voor vermenigvuldigen en delen is het essentieel dat één waarde geen eenheid heeft. Sass kan geen deling uitvoeren met pixels of percentages.

Wiskundige bewerkingen met variabelen

We kunnen eenvoudig variabelen betrekken bij de berekeningen als de variabele een geldige waarde heeft.

Stel dat we een dubbele marge aan het item willen toevoegen:

$defaultMargin: 30px;

.item {
  margin: $defaultMargin * 2; /* Result is 60px */
}
question mark

Selecteer de juiste uitspraak.

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 7. Hoofdstuk 4
some-alt