Змінні в css

Відео: CSS змінні - створення і приклади використання

Відео: Що нового? | CSS змінні

Хто вже давно займається версткою, багато раз відчували, що CSS-код важкий для правок. Наприклад, Вам захотілося поміняти колірну гамму на всій сторінці. Що для цього потрібно? Поміняти у всіх блоків один колір на інший. Незручно? Згоден, для цього придумали SASS і LESS, проте, це так собі вихід. Наприклад, Вам хочеться замінити всю колірну гамму через jаvascript, або збільшити ширину декількох блоків в 2 рази? Очевидно, що робота ця вимагає написання одноманітного коду. На щастя, відносно недавно з`явилася можливість задавати змінні прямо в CSS, і браузери їх без проблем обробляють. Про це ми поговоримо в цій статті.

Давайте розберемо наступний код:

Відео: LESS - препроцесор CSS, Урок 3 - Змінні

Змінні в CSS оголошуються в псевдоелементи root (Хоча можна і прямо в самих елементах оголошувати змінні). Використання ж їх дуже просте: замість конкретного значення властивості пишеться var (ім`я_змінної). Особливо цікаво використання змінних разом з функцією calc (). Завдяки цьому можна збільшувати або зменшувати безліч елементів на сайті, зберігаючи при цьому всі пропорції.

Відео: KharkivCSS # 2 2017 - Олена Жукова "CSS-змінні"

безумовно, змінні в CSS працюють тільки в сучасних браузерах (хоча б 2016- го року).