Виконання Обчислень Із Числовими Операторами Sass

Можна виконувати математичні обчислення з числами. Sass підтримує всі базові арифметичні операції, такі як додавання (+), віднімання (-), множення (*) та ділення (/).

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

Для додавання та віднімання важливо, щоб значення мали однакові одиниці виміру (наприклад, %, px).

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

Для множення та ділення обов'язково одне зі значень має бути без одиниці виміру. Sass не може виконати ділення пікселів або відсотків.

Математичні операції зі змінними

Можна легко використовувати змінні в обчисленнях, якщо змінна має коректне значення.

Уявімо, що потрібно додати подвійну відстань до елемента:

$defaultMargin: 30px;

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