Статьи

Какие CSS-переменные могут сделать то, что препроцессоры не могут

Август 17, 2018

Mozilla Firefox недавно реализовал долгожданную спецификацию переменных CSS . С тех пор некоторые статьи стали появляться, намекая на то, что в настоящее время они в значительной степени устарели с появлением и широким использованием таких препроцессоров, как Sass, Less и Stylus. Я бы сказал, однако, что они предоставляют то, что препроцессоры не могут, по крайней мере, не могут эффективно .

Переменные препроцессора являются статическими ; Компиляция файла Sass с переменными всегда приведет к одинаковым фиксированным значениям CSS в выходном файле. Однако собственные переменные CSS могут изменяться во время выполнения , что позволяет более элегантно реализовать такие вещи, как тематика. В дополнение к этому они также ограничены, что позволяет изменять переменную только в подмножестве дерева DOM.

Давайте посмотрим на это более подробно.

Темы сайта без CSS-переменных

Давайте попробуем реализовать цветовые темы для сайта, чтобы проиллюстрировать полезность переменных CSS. Ваша задача — изменить различные цвета в зависимости от класса элемента <body> В CSS без переменных CSS вы могли бы сделать что-то вроде: 

 .red-theme .primary-color {
  color: #801515;
}

.red-theme .primary-color-bg {
  background-color: #801515;
}

.red-theme .secondary-color {
  color: #D46A6A;
}

.red-theme .secondary-color-bg {
  background-color: #D46A6A;
}

.red-theme .tertiary-color {
  color: #AA3939;
}

.red-theme .tertiary-color-bg {
  background-color: #AA3939;
}

Это приводит к 6 отдельным селекторам в полученном CSS — и это только для одной темы. В дополнение к этому, вам понадобится либо перечисленные выше классы, добавленные в разметку, либо добавить явные селекторы в стили стилей тем CSS, которые не очень удобны в обслуживании или не занимают мало места для решения проблемы.

Так что это означает, либо: 

 <h1 class="tertiary-color">For Example</h1>
<button class="primary-color-bg">A button</button>
<a class="secondary-color">A link</a>

или: 

 .red-theme .primary-color-bg,
.red-theme button {
  background-color: #801515;
}

.red-theme .secondary-color,
.red-theme a {
  color: #D46A6A;
}

.red-theme .tertiary-color,
.red-theme h1 {
  color: #AA3939;
}

Темы сайта с переменными CSS

Реализация этого с использованием переменных намного эффективнее. В таком случае вы должны определить цветовые переменные в .red-theme Это позволит сохранить информацию о стиле вне вашей разметки, где она не принадлежит, и с помощью селекторов CSS, где она используется. 

 .red-theme {
  --theme-primary: #801515;
  --theme-secondary: #D46A6A;
  --theme-tertiary: #AA3939;
}

button, a {
  background-color: var(--theme-primary);
  color: var(--theme-secondary);
}

h1 {
  color: var(--theme-tertiary);
}

Это гораздо более элегантное решение проблемы. В дополнение к этому, как упоминалось ранее, они ограничены, поэтому ничто не мешает нам использовать другую тему, скажем, на панели навигации. 

 <body class="red-theme">
  <nav class="blue-theme">
    <button>Blue button</button>
  </nav>
  <main>
    <button>Red button</button>
  </main>
</body>

Вне тем сайта

Помимо тем, существует множество приложений, в которых переменные CSS могут расширять возможности препроцессоров. Другой пример — внедрение системы интервалов, аналогичной Gmail, позволяющей пользователю выбирать, хотят ли они, чтобы пользовательский интерфейс был компактным, удобным или удобным. 

 .compact {
  --option-padding: 0.1em 0.2em;
}

.cosy {
  --option-padding: 0.3em 0.6em;
}

.comfortable {
  --option-padding: 0.5em 1em;
}

.list-item {
  padding: var(--option-padding);
}

Последние мысли

Я показал здесь, как применять функцию предстоящих переменных CSS способом, отличным от возможностей переменных препроцессора. Помните, что переменные CSS в настоящее время включены только в последних версиях Firefox и Firefox для Android, так что это всего лишь пример того, что будет дальше.

36
Share: