Performing 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 */
}
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Awesome!
Completion rate improved to 2.04Performing 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 */
}
Дякуємо за ваш відгук!
