Поняття CSS змінних

21

Від автора: CSS змінні або користувальницькі властивості CSS дозволяють працювати зі змінними прямо в CSS. Вони відмінно допомагають у скороченні повторюваного коду CSS, а також це потужний інструмент таких ефектів, як переключення теми. У CSS змінних є функції полифилов. Вони працюють за принципом DRY – не повторюйте. З допомогою CSS змінних ви можете локалізувати значення і спрощувати первинну розробку, ітераційне тестування і надалі обслуговування. Вони офіційно включені в CSS специфікацію. Перейдемо до деталей.

Стандартне оголошення

Будь CSS властивість — color, size, position і т. д. — може зберігатися в CSS змінної. Імена змінних починаються з префікса —. Оголошуються вони шляхом додавання елементу, як і з іншими стилями:

Приклад:

/* Define CSS variables and scope */
:root {
—maincolor: black;
—secondarycolor: red;
}
/* Use CSS Variables */
body {
background: var(—maincolor);
color: white;
}
body p {
background: var(—secondarycolor);
}

Тут я визначив 2 CSS змінні із значеннями кольорів всередині селектора :root. Змінні оголошуються всередині і поширюються на область видимості селектора. На відміну від інших властивостей CsS, CSS змінні чутливі до регістру. Тому —maincolor і —Maincolor будуть 2 різні змінні.

Щоб використовувати CSS змінні, їх значення необхідно обернути в функцію var() і передати ім’я змінної всередину. Після цього можна вибрати необхідну властивість CSS і використовувати значення змінної.

Приклад:

a {
color: var(—maincolor);
text-decoration-color: var(—secondarycolor);
}

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

Приклад:

/* Define CSS variables and scope */
:root {
—darkfont: green;
—darkborder: 5px dashed var(—darkfont);
}
/* Use CSS Variables */
.container {
color: var(—darkfont);
border: var(—darkborder);
}

Область видимості і каскадування

CSS змінні поводяться, як звичайні властивості. Змінна доступна в будь-якому тегу вниз по каскаду. Наприклад, ці змінні можна використовувати у будь-якому місці на сторінці:

root {
—darkborder: 5px solid black;
}
body {
—darkborder: 1px solid darkred;
}
img{
border: var(—darkborder); /* img border will be 1px solid darkred */
}

Ми визначили одну і ту ж змінну –darkborder двічі в різних селекторах. За правилами каскадування мінлива всередині селектора BODY має більш високу специфічність, тому до img застосується значення другої змінної.

CSS змінні успадковуються за замовчуванням. Значення CSS властивості, визначене на батьківському елементі, також застосовується до дочірніх елементів, якщо до дочірніх елементів застосовується дана властивість.

Наприклад:

:root {
—myborder: 2px solid black;
}
ul {
margin: 0;
border-left: var(—myborder);
}
ul ul {
margin-left: 30px;
}

Успадкування властивостей можна відключити, якщо вказати спеціальне значення initial в потрібному селекторі. З прикладу вище:

:root {
—myborder: 2px solid black;
}
ul {
margin: 0;
border-left: var(—myborder);
}
ul ul {
—myborder: initial; /* reset —myborder variable */
margin-left: 30px;
}

Переваги в медіа запитах

Цей тип шаблону можна використовувати для медіа-запитів CSS Variables, де всі зміни відбуваються в браузері, а змінні знають про умови, в яких вони використовуються. Це дозволить не повторювати селектори, а не властивості.

Приклад:

body {
—primary: #7F583F;
—secondary: #F7EFD2;
}
a {
color: var(—primary);
text-decoration-color: var(—secondary);
}
@media screen and (min-width: 480px) {
body {
—primary: #F7EFD2;
—secondary: #7F583F;
}
}

Просте демо

Установка запасних значень, коли CSS змінна не визначена

background: var(—primarybg, white);
/* Normal value as fallback value */
font-size: var(—defaultsize, var(—fallbacksize, 36px));
/* var() as fallback value */

Як фолбека значень для браузерів без підтримки можна використовувати:

background: white;
/* background value for browsers that don’t support CSS variables */
background: var(—primarybg, white);

І всі щасливі!

Підтримка в браузерах

Поняття CSS змінних

Багато зеленого, можна потестувати.

Висновок

Якщо ви дочитали статтю, сподіваюся, ви вже в передчутті від вивчення переваг CSS змінних. Спробуйте їх у своєму проекті! Якщо вам сподобався блог, будь ласка, залишайте свої думки, а також проблеми і питання в коментарях.