CSS-змінні
CSS-змінні відомі також як змінні каскадних таблиць стилів або CSS-змінні кастомних властивостей.
CSS-змінні - це механізм, що дозволяє зберігати значення властивостей для повторного використання в коді CSS. Змінні роблять CSS більш модульним і легшим у редагуванні, особливо коли використані повторювані значення.
Припустимо у нас є акцентний колір і він часто зустрічається по макету.
<section class="my-section">
<h1 class="my-title">Lorem ipsum dolor sit amet.</h1>
<p class="my-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</section>.my-title {
color: #FFFFFF;
background-color: #0000FF;
}
.my-text {
color: #0000FF;
}Якщо, припустимо замовник вирішить поміняти акцентний колір, або шрифт, то доведеться по всьому файлу стилів замінити значення на нове. Це може бути марудною справою. Тому ключові значення виносять у змінні, а при оголошенні якоїсь властивості стилю просто вказують цю змінну. В такому разі при зміні якогось значення стилю достатньо буде поміняти його у змінних.
Далі розглянемо як це зробити.
Оголошення змінної
Змінні оголошують напочатку файлу зі стилями в спеціальному селекторі :root, що представляє кореневий елемент документа (зазвичай <html>), і можуть бути використані в будь-якому місці у CSS коді.
Щоб визначити змінну, використовують властивість --назва-змінної, де назва-змінної - це ім'я, яке ви вибираєте для змінної. Ім'я змінної чутливе до регістру та може містити латинські літери, цифри, підкреслення і тире.
:root {
--accent-color: #3498db;
--main-font-size: 24px;
}Імена змінним можна давати в dash-snake-case-pattern, underscore_snake_case_pattern або camelCasePattern. Головне, щоб стилістика написання назв для змінних була однаковою по всьому проєкту.
Використання змінної
Щоб використати в CSS-коді змінну потрібно її вказати у функції var().
:root {
--accent-color: #0000FF;
}
.my-title {
color: #FFFFFF;
background-color: var(--accent-color);
}
.my-text {
color: var(--accent-color);
}Ми додали трохи коду, але тепер, щоб змінити акцентний колір по всьому документу, достатньо задати йому нове значення після відповідної назви в селекторі :root.
Резервне значення
Припустімо з якоїсь причини ми звертаємося до змінної, оголошення якої немає в :root. На такі випадки можна задати альтернативне значення стилю (фолбек). Це необовʼязковий параметр, тому не варто його вказувати скрізь.
var(--ім'я_змінної, фолбек)Наприклад:
.my-text {
color: var(--accent-color, #3498db);
}Область видимості
Змінні вказані в :root будуть доступні в будь-якому селекторі. Але можна оголосити змінні в якомусь іншому селекторі й тоді він буде доступний тільки до цього елемента і його нащадків. Тобто ми створимо локальну область видимості для цієї змінної.
<section class="my-section">
<h1 class="my-title">Lorem ipsum dolor sit amet.</h1>
<p class="my-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</section>.my-section {
--accent-color: #0000FF;
}
.my-title {
color: #FFFFFF;
background-color: var(--accent-color);
}
.my-text {
color: var(--accent-color);
}Змінні можна перевизначати локально іншими значеннями. Для цього необхідно оголосити змінну з таким самим ім'ям, що і в предка, і задати їй необхідне значення.
Last updated