# CSS-змінні

CSS-змінні відомі також як змінні каскадних таблиць стилів або CSS-змінні кастомних властивостей.

CSS-змінні - це механізм, що дозволяє зберігати значення властивостей для повторного використання в коді CSS. Змінні роблять CSS більш модульним і легшим у редагуванні, особливо коли використані повторювані значення.&#x20;

Припустимо у нас є акцентний колір і він часто зустрічається по макету.&#x20;

```html
<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>
```

```css
.my-title {
  color: #FFFFFF;
  background-color: #0000FF;
}

.my-text {
  color: #0000FF;
}
```

Якщо, припустимо замовник вирішить поміняти акцентний колір, або шрифт, то доведеться по всьому файлу стилів замінити значення на нове. Це може бути марудною справою. Тому ключові значення виносять у змінні, а при оголошенні якоїсь властивості стилю просто вказують цю змінну. В такому разі при зміні якогось значення стилю достатньо буде поміняти його у змінних.

Далі розглянемо як це зробити.&#x20;

## Оголошення змінної

Змінні оголошують напочатку файлу зі стилями в спеціальному селекторі <mark style="background-color:red;">:root</mark>, що представляє кореневий елемент документа (зазвичай <mark style="background-color:red;">\<html></mark>), і можуть бути використані в будь-якому місці у CSS коді.

Щоб визначити змінну, використовують властивість <mark style="background-color:red;">--назва-змінної</mark>, де <mark style="background-color:red;">назва-змінної</mark> - це ім'я, яке ви вибираєте для змінної. Ім'я змінної чутливе до регістру та може містити латинські літери, цифри, підкреслення і тире.

```css
:root {
  --accent-color: #3498db;
  --main-font-size: 24px;
}
```

Імена змінним можна давати в dash-snake-case-pattern, underscore\_snake\_case\_pattern або camelCasePattern. Головне, щоб стилістика написання назв для змінних була однаковою по всьому проєкту.

## Використання змінної

Щоб використати в CSS-коді змінну потрібно її вказати у функції <mark style="background-color:red;">var()</mark>.

```css
:root {
  --accent-color: #0000FF;
}

.my-title {
  color: #FFFFFF;
  background-color: var(--accent-color);
}

.my-text {
  color: var(--accent-color);
}
```

Ми додали трохи коду, але тепер, щоб змінити акцентний колір по всьому документу, достатньо задати йому нове значення після відповідної назви в селекторі <mark style="background-color:red;">:root</mark>.

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

## Резервне значення&#x20;

Припустімо з якоїсь причини ми звертаємося до змінної, оголошення якої немає в  <mark style="background-color:red;">:root</mark>. На такі випадки можна задати альтернативне значення стилю (фолбек). Це необовʼязковий параметр, тому не варто його вказувати скрізь. &#x20;

```css
var(--ім'я_змінної, фолбек)
```

Наприклад:

```css
.my-text {
  color: var(--accent-color, #3498db);
}
```

## Область видимості

Змінні вказані в  <mark style="background-color:red;">:root</mark> будуть доступні в будь-якому селекторі. Але можна оголосити змінні в якомусь іншому селекторі й тоді він буде доступний тільки до цього елемента і його нащадків. Тобто ми створимо локальну область видимості для цієї змінної.

```html
<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>
```

```css
.my-section {
  --accent-color: #0000FF;
}

.my-title {
  color: #FFFFFF;
  background-color: var(--accent-color);
}

.my-text {
  color: var(--accent-color);
}
```

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