Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке CSS-змінні? Як оголосити змінну в CSS?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**CSS-змінні (custom properties)** - це користувацькі значення, які оголошуються один раз через `--ім'я` (зазвичай у `:root`) і застосовуються в стилях через функцію `var()`. **Ключове:** на відміну від препроцесорів, CSS-змінні працюють динамічно і їх можна змінювати навіть у JavaScript чи залежно від стану.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення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()`.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.