Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Виконання Обчислень Із Числовими Операторами Sass | CSS-Препроцесори та Sass
Просунуті техніки CSS

bookВиконання Обчислень Із Числовими Операторами 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 */
}
question mark

Виберіть правильне твердження.

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 7. Розділ 4

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.04

bookВиконання Обчислень Із Числовими Операторами 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 */
}
question mark

Виберіть правильне твердження.

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 7. Розділ 4
some-alt