Єдиним якістю, яким повинен володіти мовою, щоб претендувати на статус мови програмування, це змінні. Вони вважаються неймовірно корисними, економлять розробникам купу годин і сил. Крім того, змінні здатні всебічне поліпшити процес написання коду.
Це саме те, чого в CSS не вистачало. Такі динозаври, як Sass і Less використовували змінні, але в стандартній CSS ніколи не було змінних. До сьогоднішнього дня.
Вони довго маячили на обрії, але лише недавно змінні почали впроваджуватися в CSS. Отже, як же вони працюють?
підтримка браузерів
В даний час змінні CSS підтримуються тільки Firefox Nightly. І в дійсності ми не можемо їх використати. Проте, не дивлячись на те, що вони ще дуже і дуже сирі (в стані бета-тестіванія) ми всі з нетерпінням чекаємо, що вони з'являться в нашому житті найближчим часом.
Для браузерів на движку Webkit вже є шлях для отримання змінних. Крім того, ще вони доступні для деяких версій Chrome. які активуються через flag в chrome: // flags і за допомогою префікса -webkit-.
Що стосується IE, на жаль, ми повинні почекати. Подивимося, що ж готує нам реліз прийдешній.
Як використовувати змінні CSS
Ми всі прекрасно знаємо, як працюють змінні, тому тільки синтаксис зазнав деяких змін. Ось як ми будемо оголосимо змінні в CSS:
Глобальні змінні
Як і в інших мовах програмування, можна також встановити змінні в якості глобальних. Наприклад, так:
Я використовую root псевдо елемент через те, що інтерфейс верхнього рівня в DOM буде той, який тримає ці змінні. А вони, в свою чергу, будуть працювати вниз по дереву тегів DOM для всіх наших елементів.
Коли справа доходить до застосування змінних, ми використовуємо функцію var () для виклику змінної. Це можна зробити так:
Після того, як ми оголосили змінну в корені документа, тепер ми маємо право використовувати її в будь-якому місці.
контекстні змінні
На додаток до глобальних змінних, можна встановити змінну на конкретний елемент. В такому випадку, його значення буде змінюватися:
В даному конкретному прикладі якірні теги успадкує нові значення, які ми поставили в їх рідному елементі. Проте, нічого за межами цього div не використовуватиме значення, задані в кореневому елементі.
Змінні CSS будуть у нагоді, коли вони перестануть маячать на горизонті майбутнього і перетворяться в реальність. Вони можуть навіть стати першими дзвіночками відмови від препроцесорів і поверненням до стандартного мови CSS.