Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Performing Calculations with Sass Numeric Operators | CSS Preprocessors and Sass
Advanced CSS Techniques

bookPerforming Calculations with Sass Numeric Operators

We can perform mathematical calculations on numbers. Sass supports all basic arithmetics like addition (+), subtraction (-), multiplication (*), and division (/).

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

For addition and subtraction, it is important to have values with the same units (e.g., %, px).

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

For multiplication and division, it is crucial to have one unitless value. Sass can't calculate the division of pixels or percentages.

Mathematical operations with variables

We can easily involve variables in the calculations if the variable has a valid value.

Let's imagine that we need to add a double margin to the item:

$defaultMargin: 30px;

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

Select the correct statement.

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 7. Kapitel 4

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 2.04

bookPerforming Calculations with Sass Numeric Operators

Stryg for at vise menuen

We can perform mathematical calculations on numbers. Sass supports all basic arithmetics like addition (+), subtraction (-), multiplication (*), and division (/).

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

For addition and subtraction, it is important to have values with the same units (e.g., %, px).

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

For multiplication and division, it is crucial to have one unitless value. Sass can't calculate the division of pixels or percentages.

Mathematical operations with variables

We can easily involve variables in the calculations if the variable has a valid value.

Let's imagine that we need to add a double margin to the item:

$defaultMargin: 30px;

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

Select the correct statement.

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 7. Kapitel 4
some-alt