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.

В CSS-змінних можна зберігати не тільки колір. Можна створити окремі змінні наприклад для відступів, розміру шрифта, точок перелами для активної верстки тощо. Що більше значень винесено у змінні тим легше буде вносити зміни в проєкт "на льоту". Але не все варто виносити в змінні, треба знайти золоту середину необхідності у цьому.

Резервне значення

Припустімо з якоїсь причини ми звертаємося до змінної, оголошення якої немає в :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);
}

Змінні можна перевизначати локально іншими значеннями. Для цього необхідно оголосити змінну з таким самим ім'ям, що і в предка, і задати їй необхідне значення.

PreviousКаскад стилів NextОдиниці вимірювання

Last updated 1 year ago