Переменные в CSS

Переменные в CSS

Куда катится CSS?

Куда катится CSS?

Custom Properties (CSS переменные)

Custom Properties (CSS переменные)

Какие проблемы решают:

• Уменьшение количества повторяющегося кода в CSS.
• Гибкость и управляемость кода.
• Cоздание впечатляющих эффектов (смены тем на лету).
• Название содержит семантическую информацию.

Custom Properties

			:root {
			  --main-bg-color: brown;
			}
			 
			body {
  				background-color: var(--main-bg-color);
			}
		

  			background-color: var(--main-bg-color, #000);
		

Custom Properties. Js

Получаем:

			var documentProperties = getComputedStyle(document.documentElement);
			var value = documentProperties.getPropertyValue('--primary-color');
		

Назначаем

			element.style.setProperty('--variable', 'value');
		

Удаляем

			element.style.removeProperty('--variable');
		

Custom Properties. Первые впечатления

Все круто, но

• Что за уродливый синтаксис?
• В Sass уже есть переменные

Почему такой синтаксис?

• Custom Properties - не переменные. Надо оставить будущим переменным
• Допустимая лексема CSS.

Отличия от переменных в препроцессорах

• Переменные препроцессоров исчезают при сборке.
• CSS переменные:
  • Для записи не нужен препроцессор.
  • Работают в runtime, доступны для чтения/изменения.
  • Живут в DOM'е, ограничены скоупом узла, наследуются до последнего потомка.
  • Учитывают каскад.

@media запросы
Stylus

			gutter = 5px;
			@media (min-width: 100px) {
			  gutter = 20px;
			}
			.Container {
			  padding: gutter;
			}
		

			.Container {
  			 padding: 5px;
			}
		

@media запросы
CSS переменные

			:root {
			  --gutter: 5px;
			}
			@media (min-width: 100px) {
			  --gutter: 20px;
			}
			.Container {
			   padding: var(--gutter);
			}
		

@media запросы

Каскад
Stylus

		<div class="sideBar">
			<div class="title">Sidebar title</div>
		 </div>
		 <div class="content">
		 	<div class="title">Original title</div>
		 </div>

		

			titleColor = red;
			.title {
			  color: titleColor
			}
			.sideBar {
			  titleColor = blue
			}
		

			.title {
  			color: red;
			}
		

Каскад
CSS переменные

			:root {
			  --titleColor: red;
			}
			.title {
			  color: var(--titleColor);
			}
			.sideBar {
			  --titleColor: blue;
			}
		

Custom Properties

Custom Properties

Яндекс. Главная страница поиска

Для чего используются CSS переменные?

• Эксперименты.
• Контроль над цветом и типографикой.
• Менеджеры могут изменять константы.

Custom Properties

Интересные решения:

• I18N.
• Autoprefixer.
• Контроль над рендирингом страницы.
• Условные операторы.
• RxJs + Custom Properties.

Рекомендации

• :root
• var(--property, fallback)
• @supports
• --property-calc
• initial

@apply

• Позволяет использовать в переменной набор свойств (аналог миксина).
• Синтаксис как у CSS переменных, только с "{ }".

			:root {
				--pink-theme: {
					color: #6A8759;
					background-color: #F64778;
    			}
     		}
			body {
  				@apply --pink-theme;
			}
		

Выводы:

• Фичи из препроцессоров внедряются в CSS.
• CSS переменные - мощный инструмент.
• Не надо бояться использовать CSS переменные.

Ссылки

1. What is the difference between CSS variables and preprocessor variables?
2. Переменные в CSS: зачем они нам?
3. Пользовательские свойства как основа архитектуры CSS - Павел Ловцевич
4. CSS custom properties (native variables) In-Depth
5. CSS @apply Rule
6. CSS @apply rule (native CSS mixins)

Спасибо!