Skip to main content

Що таке функції в SCSS?

Frontend-інструментиJunior~1 хв читання
Запропонувати правку

Функції в SCSS - це конструкції, які приймають аргументи, виконують обчислення або перетворення і повертають одиничне значення, яке можна підставити в будь-яку CSS-властивість. На відміну від міксинів, функції не генерують набір правил, а повертають конкретний результат: число, колір, рядок, довжину тощо.

Приклад власної функції

scss
@function rem($px) { @return $px / 16 * 1rem; } .title { font-size: rem(32); }

Результат компіляції

css
.title { font-size: 2rem; }

Де функції корисні

  1. розрахунки розмірів - конвертація px → rem, обчислення ширин, відступів, пропорцій;
  2. робота з кольорами - світліше/темніше, зміна прозорості тощо;
  3. створення логіки - формування значень за умовою.

Важливо: SCSS також має готовий набір вбудованих функцій (наприклад, darken(), lighten(), mix(), percentage()), які позбавляють від ручних обчислень.

Підсумок: функції в SCSS - це інструмент для обчислень і генерування значень. Вони допомагають позбутися рутинних розрахунків, роблять код чистішим, а стилі - гнучкішими і математично точними.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку