Нативні змінні CSS. Вже пора…. Змінні CSS Навіщо вивчати змінні CSS

01.09.2023

У міру зростання проекту його CSS файли розростаються та засмічуються. Впоратися з цим допоможуть CSS змінні, вони дають можливість повторно використовувати повторювані CSS властивості.
Раніше змінні можна було використовувати лише в Less або Sass, але це препроцесори і вимагають компіляції перед використанням. Тепер змінні доступні у чистому CSS.

Оголошення та використання змінних у CSS

На змінні в CSS поширюються самі обмеження і правила успадкування, як і звичайні CSS правила. Найпростіший спосіб використовувати їх – оголосити їх глобально у псевдо-класі :rootТак всі інші селектори зможуть його успадкувати.

:root( --awesome-blue: #2196F3; )

Для доступу до значення змінної потрібно використовувати конструкцію var(…). Зверніть увагу, що імена залежать від регістру, тобто -foo! = -FOO.

Some-element( background-color: var(--awesome-blue); )

Підтримка

На даний момент Firefox підтримує змінні CSS. У Google Chrome починаючи з версії 49 цю можливість увімкнено, якщо ви використовуєте версію 48 або старішу, то ви можете вручну включити підтримку, перейшовши на сторінку chrome://flags/та ввімкнути Enable experimental Web Platform features.

Приклад 1 - Колірні схеми

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

Тепер, якщо замовник захотів змінити колір на сторінці, ми можемо змінити весь стиль змінивши один рядок (рядок оголошення змінної). Без змінних нам довелося б міняти усі місця, де використовується цей колір.

Приклад 2 - Зрозумілі назви для складних властивостей

Ще одна чудова можливість, яку дають CSS змінні - сховати складну властивість за коротким зрозумілим ім'ям. Хороший приклад — CSS властивості з кількома параметрами, наприклад: box-shadow, transformі font.

Оголосивши змінну зі зрозумілим ім'ям ми зможемо використовувати її не витрачаючи час на розбір складної якості.

Приклад 3 - Динамічні змінні

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

Наведіть на зелений та синій блоки.

Висновок

Як бачите змінні досить прості у використанні і їх безперечно варто спробувати. Розглянемо ще пару речей, на які варто звернути увагу:

Функція var() має другий параметр, який буде використаний як значення, якщо змінна викличе помилку: width: var(-custom-width, 20%);
При оголошенні власного правила також можна використовувати змінні: --base-color: #f93ce9; --background-gradient: linear-gradient(to top, var(--base-color), #444);
Змінні можна використовувати ще з одним нововведенням в CSS — функцією calc(). Однак працює це поки що тільки в Firefox: --container-width: 1000px; max-width: calc(var(--container-width) / 2);

На цьому все! Спробуйте використовувати CSS змінні, але поки уникайте їх у серйозних проектах.

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

Хаос у CSS

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

Останнім часом багато розробників почали використовувати CSS-препроцесори типу SASS або LESS, які вирішують цю проблему за допомогою змінних. Хоча ці інструменти помітно збільшили продуктивність розробки, препроцесорні змінні мають дуже серйозну ваду: вони статичні і не можуть змінюватися на льоту. Поява можливості динамічно змінювати змінні не тільки дозволить на льоту змінювати теми сайту або програми, але також означає значне розширення можливостей чуйного дизайну та створення поліфілів для майбутніх властивостей CSS. З виходом Chrome 49 змінні стали доступними у вигляді кастомних CSS-властивостей.

Кастомні властивості у двох словах

Кастомні властивості розширюють наш CSS-інструментарій двома новими можливостями:

Автор коду може надавати довільні значення властивостям із придуманими ним самим іменами.
Функція var() дозволяє використовувати ці значення в інших властивостях.

Короткий приклад для демонстрації:

:root ( --main-color : #06c ; ) #foo h1 ( color : var (--main-color); )

Функція var() повертає значення кастомного властивості і замінюється ним, у результаті виходить color: #06c; . Якщо кастомна властивість десь визначена в таблиці стилів, вона буде доступна функції var .

На перший погляд, синтаксис може здатися дивним. Багато розробників дивуються: «Чому б просто не використовувати $foo як імена змінних?» Це було зроблено спеціально для підвищення гнучкості та можливості у перспективі створювати макроси для $foo. Докладніше про це можна прочитати у статті одного з авторів специфікації, Таба Аткінса (Tab Atkins).

Синтаксис кастомних властивостей

Синтаксис кастомних властивостей досить простий:

Header-color: #06c;

Зверніть увагу, що кастомні властивості реєстрозалежні, тобто --header-color і --Header-Color - це дві різні властивості. Хоча синтаксис спочатку може здатися нехитрим, насправді він дозволяє зробити досить багато. Наприклад, нижче - приклад валідної кастомної якості:

--foo: if (x > 5) this.width = 10;

Хоча цей вираз не буде працювати як змінна (а також не буде валідним значенням будь-якої звичайної властивості), потенційно воно може бути прочитане та оброблено на льоту за допомогою JavaScript. Це означає, що кастомні властивості можуть відкрити доступ до різноманітних цікавих технік, недоступних з нинішніми CSS-препроцесорами. Так що якщо ви, позіхаючи, думаєте щось на кшталт "Яка різниця, у мене є SASS ...", подумайте ще раз! Це не ті змінні, з якими ви звикли працювати.

Каскад

Кастомні властивості дотримуються стандартних правил каскаду, так що ви можете визначити одну і ту ж властивість на різних рівнях специфічності:

:root ( --color: blue; ) div ( --color: green; ) #alert ( --color: red; ) * ( color: var(--color); )<p >У мене синій колір, успадкований від root!p > <div >А для мене встановлений зелений!div > <div id = "alert" >Ну а для мене – червоний!<p >І для мене червоний: через спадкування!p > div >

Це означає, що можна використовувати кастомні властивості в медіавиразах для управління чуйним дизайном. Прикладом використання може бути збільшення зовнішніх відступів від основних структурних елементів зі збільшенням розмірів екрана:

:root ( --gutter : 4px ; ) section ( margin : var (--gutter); ) @media (min-width: 600px ) ( :root ( --gutter : 16px ; ) )

Слід зазначити, що вищенаведений прийом неможливо повторити використовуючи CSS-препроцессоры, оскільки вони неспроможні перевизначати змінні всередині медиавыражений. Ця можливість має величезний потенціал!

Також є можливість використовувати кастомні властивості, що одержують своє значення з інших кастомних властивостей. Це може бути дуже корисно для налаштування тем:

:root ( --primary-color : red; --logo-text : var (--primary-color); )

Функція var()

Щоб отримати та використовувати значення кастомної властивості, знадобиться функція var(). Ось її синтаксис:

var ( [, ]?)

Тут - ім'я певного автором кастомного властивості, - фолбек, який буде використаний, якщо згадана кастомна властивість не є валідною. Фолбек може бути списком, розділеним комами, він буде перетворено на єдине значення. Наприклад, var(--font-stack, "Roboto", "Helvetica"); визначає фолбек "Roboto", "Helvetica". Зверніть увагу, що короткий запис деяких властивостей (як у разі зовнішніх та внутрішніх відступів) поділяється не комами, а пробілами, так що валідний фолбек для внутрішніх відступів виглядатиме приблизно так:

p ( padding : var (--pad, 10px 15px 20px); ) /* У стилях компоненти: */.component .header ( color : var (--header-color, blue); ) .component .text ( color : var (--text-color, black); ) /* У стилях основної програми: */.component (--text-color: #080; /* header-color не встановлений, тому залишається синім відповідно до фолбеку */ }

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

<x-foo >#shadow<style > p ( background-color : var (--text-background, blue); )style > <p >Цей текст має жовте тло, тому що так зазначено в документі! Інакше був би синій.p > x-foo >/* У стилях основної програми: */ x-foo ( --text-background: yellow; )

При використанні var() потрібно пам'ятати кілька нюансів. Наприклад, змінні не можуть бути іменами властивостей:

.foo ( --side : margin-top; var (--side): 20px ; )

Це не еквівалент присвоювання margin-top: 20px; . Більше того, друге оголошення не є валідним і викине помилку.

Аналогічно, неможливо створити значення, частина якого береться зі змінної:

.foo ( --gap : 20 ; margin-top : var (--gap)px ; )

Це також не є еквівалентом margin-top: 20px; . Щоб зібрати значення, знадобиться щось інше: функція calc() .

Створення значень за допомогою calc()

На випадок, якщо ви ніколи з нею не працювали, функція calc() - це невеликий, зручний інструмент, що дозволяє виконувати обчислення, щоб визначати значення в CSS. Вона підтримується всіма сучасними браузерами, і її можна використовувати разом із кастомними властивостями для створення нових значень. Наприклад:

.foo ( --gap : 20 ; margin-top : calc (var(--gap) * 1px ); /* зашибісь */ )

Робота з кастомними властивостями JavaScript

Щоб отримати значення кастомної властивості, використовуйте метод getPropertyValue() CSSStyleDeclaration об'єкта.

<p >Цей абзац червоного кольору!p >/* JS */ var styles = getComputedStyle(document.documentElement); var value = String(styles.getPropertyValue("--primary-color")).trim(); // value = "red" !}

Аналогічно, щоб динамічно змінювати значення кастомної властивості, використовуйте метод setProperty() CSSStyleDeclaration об'єкта .

/* CSS */ :root ( --primary-color: red; ) p ( color: var(--primary-color); ) <p >А тепер цей абзац зеленого кольору!p >/* JS */ document.documentElement.style.setProperty("--primary-color", "green");

Також при заданні значення кастомної властивості на льоту можна використовувати посилання на іншу кастомну властивість, вставивши функцію var() виклик setProperty() .

/* CSS */ :root ( --primary-color: red; --secondary-color: blue; ) <p >Здорово! Цей абзац синього кольору!p >/* JS */ document.documentElement.style.setProperty("--primary-color", "var(--secondary-color)");

Оскільки кастомні властивості можуть посилатися інші кастомні властивості, можете уявити які цікаві динамічні ефекти можна робити таким чином.

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

На даний момент кастомні властивості підтримуються в Chrome 49, Firefox 42, Safari 9.1 та iOS Safari 9.3.

Оригінальна стаття: CSS Variables: Why Should You Care? Статтю вичитували:

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

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

Заголовок

Деякий текст...

Підвал

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

Функція var() дозволяє вставляти значення змінних користувачів у значення стильових властивостей. var() не можна використовувати в іменах селекторів та властивостях.

Самі змінні користувача та їх значення описуються всередині довільного селектора і повинні починатися з двох дефісів. Через двокрапку змінної надається будь-яке допустиме для CSS значення.

Aside ( --my-font: Helvetica, Arial, sans-serif; )

Для звернення до змінної --my-font використовується запис var(--my-font) , який можна вставляти як значення властивості. При цьому область видимості змінної обмежена зазначеним селектором (aside в даному випадку) і застосування var(-my-font) в іншому селекторі не дасть результату. Для створення глобальних змінних слід описати всередині селектора :root .

Позначення

	Опис	приклад
<тип>	Вказує тип значення.	<размер>
A && B	Значення мають виводитися у вказаному порядку.	<размер> && <цвет>
A \| B	Вказує, що треба вибрати лише одне значення із запропонованих (A або B).	normal \| small-caps
A \|\| B	Кожне значення може використовуватись самостійно або спільно з іншими у довільному порядку.	width \|\| count
	Групує значення.	[crop \|\| cross]
*	Повторювати нуль чи більше разів.	[,<время>]*
+	Повторювати один чи більше разів.	<число>+
?	Зазначений тип, слово чи група не є обов'язковим.	inset?
(A, B)	Повторювати щонайменше A, але з більше разів.	<радиус>{1,4}
#	Повторювати один або більше разів через кому.	<время>#

Значення

<переменная>Ім'я змінної, позначається двома дефісами попереду (--my-font).<значение>Резервне значення, яке підставляється замість заданого, у разі, якщо змінна не визначена. Через кому можна вказати кілька значень.

приклад

var()

Кнопки

У цьому прикладі вводяться дві змінні: --primary-color та --info-color . Змінна --white не визначена, тому підставляється вказане значення за промовчанням. Для селектора p.info значення змінної --primary-color перевизначається.

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

Recommendation (Рекомендація) - специфікація схвалена W3C та рекомендована як стандарт.
Candidate Recommendation ( Можлива рекомендація) - група, відповідальна за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.
Proposed Recommendation ( Пропонована рекомендація) - на цьому етапі документ подано на розгляд Консультативної ради W3C для остаточного затвердження.
Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
Editor"s draft ( Редакторська чернетка) - Чорнова версія стандарту після внесення правок редакторами проекту.
Draft ( Чернетка специфікації) – перша чорнова версія стандарту.

Останнє оновлення: 18.11.2018

Як і в мовах програмування, CSS можна визначати змінні. Змінні CSS можуть зберігати стандартні значення, які можна привласнити, звичайним властивостям CSS, наприклад, колір фону, колір шрифту, висоту шрифту, ширину і висоту елементів і так далі. Потім їх можна багаторазово використовувати у різних частинах визначення стилів.

Варто зазначити, що хоча часто використовується термін "змінні" (css variables), офіційно вони називаються custom properties (кастомні або настроювані властивості).

Визначення змінних CSS має починатися з префікса - наприклад, -my-color. Вони можуть бути визначені будь-якого елемента. Наприклад:

Variables у CSS3

Перший блок.

Другий блок.

Третій блок.

Тут у коді CSS для елемента div визначено дві змінні: --text-color і --text-size

Text-color: #ff4757; --text-size: 20px;

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

#p1 ( color: var(--text-color); font-size: var(--text-size); )

У результаті перший блок отримає висоту шрифту з --text-size, другий блок отримає колір шрифту з --text-color, а третій блок отримає обидва ці компоненти.

Якщо нам потрібно змінити колір тексту, достатньо змінити значення змінної.

Подібні змінні можна визначити будь-якого елемента. При цьому вони успадковуються дочірніми елементами. Так, у прикладі вище бачимо, що вкладений елемент параграфа отримує стилі від батьківського div.

Але якби параграф знаходився б поза блоком div:

Перший блок.

Другий блок.

Третій блок.

Тоді б значення зі змінних до нього не застосовувалися б:

Якщо ж необхідно, щоб змінні могли використовуватися глобально для всіх елементів, тоді їх визначають для елемента :root

:root( --text-color: #ff4757; --text-size: 20px; )

Резервні значення

При визначенні змінних можуть містити якісь помилки, наприклад, змінна не визначена (загалом не визначена або в її назві помилка). У цьому випадку ми можемо вказати при застосуванні змінної резервні значення, які будуть застосовуватися у разі, якщо значення змінної некоректне.

Variables у CSS3

Перший блок.

Другий блок.

Третій блок.

Другий параметр функції var() дозволяє задати резервне значення. Це може бути як точне значення, так і знову ж таки значення іншої змінної:

Color: var(--text-color, var(--reserved-color));

Для другої змінної також можна визначити резервне значення, якщо вона некоректна:

Color: var(--text-color, var(--reserved-color, red));