Що таке CSS-змінні?
CSS-змінні (див. Специфікацію) додають в CSS два нових поняття. Відтепер можна визначати власні властивості, що починаються з подвійного дефіса (-):
А потім використовувати їх за допомогою var ():
Для всіх, хто знайомий з SASS або подібним мовою, компілює в CSS, переваги цього очевидні, можна запросто міняти кольори, розміри і т.п. всього в одному місці.
Що цікаво, змінні підкоряються тим же правилам спадкування, що інші CSS-властивості. Наприклад, раптом ми вирішили поекспериментувати з основним кольором нашого блогу:
Всі номери всередині тієї частини сторінки, що відноситься до запису в блозі, виявляться страшнуватого коричневого відтінку.
CSS-змінні просто чудово поєднуються з виразом calc ():
Не так уже й рідко трапляється відмовлятися від окремого CSS взагалі і просто писати стилі в JS:
CSS-змінні дозволяють робити набагато краще, візьмемо той же приклад:
Якщо примудритися, можна обійтися і без конкатенації:
Можна навіть визначити в CSS значення за замовчуванням, яке потім перевизначити скриптом:
Ось готовий приклад, з яким можна пограти:
P.S. Це теж може бути цікаво:
Не минуло й півроку з останньої зміни робочого процесу W3C, як керівництву Консорціуму надійшла пропозиція застосувати нарешті цей новий процес на ділі. І списати вже неактуальні специфікації HTML в музей, щоб вони не заплутували розробників, «прикидаючись» актуальними.
Ще один модуль CSS, про який ми розповідали, непомітно дозрів до статусу, з якого W3C радить починати повсякденне використання новинок. Властивість contain дозволяє обмежувати зміни дерева відтворення, перерисовку CSS-боксів і зміни їх розмірів в межах елемента. Тому воно так важливо ...
ДАЛІ
З Парижа (на фото), де недавно проходила зустріч робочої групи CSS, прилетіла цікава новина: властивості grid-row-gap і grid-column-gap, а також їх скорочення grid-gap ...