Skip to main content

Що таке CSS-змінні? Як оголосити змінну в CSS?

CSSJunior~1 хв читання
Запропонувати правку

CSS-змінні (або custom properties), це користувацькі значення, які можна оголосити один раз і повторно використовувати в стилях. Вони допомагають не дублювати одні й ті самі цифри та кольори, пришвидшують підтримку і зміну дизайну.

Як оголосити змінну

Змінні оголошуються всередині селектора і починаються з --.

Зазвичай їх розміщують у :root, щоб вони були доступні всюди:

css
:root { --main-color: #3498db; --font-size: 18px; }

Як використовувати змінну

Щоб застосувати, використовують функцію var():

css
p { color: var(--main-color); font-size: var(--font-size); }

Що важливо знати

  • область видимості змінної дорівнює області видимості селектора, де вона оголошена;
  • змінні можна перевизначати на будь-якому рівні;
  • на відміну від препроцесорів (Sass/LESS), CSS-змінні працюють динамічно, їх можна змінювати навіть у JavaScript або залежно від стану (наприклад, для темної теми).

Підсумок: CSS-змінні дозволяють зберігати значення, що повторюються (наприклад, кольори, розміри), в одному місці і використовувати їх багаторазово, оголошуючи через --ім'я і застосовуючи через var().

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

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

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

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