Статьи

Нативные переменные CSS: долгожданное дополнение или огромная ошибка?

Сообщество веб-разработчиков недавно получило несколько важных новостей . Хотя еще не в ночных вечерах, снова проводятся эксперименты, которые в случае успеха предоставят нам встроенную поддержку переменных, миксинов и модулей CSS в браузерах. Вопрос, правда, это хорошо?


  • Поддерживать проекты проще
  • Напиши меньше “код”
  • Более упорядоченная интеграция с JavaScript
  • Обновите настройки и параметры для всего сайта с одним изменением значения

  • Должен ли CSS быть сложным?
  • Более высокий барьер входа для дизайнеров
  • Текущий предложенный синтаксис покажется слишком запутанным для некоторых

Прежде чем мы продвинемся, имейте в виду, что эти разработки все еще находятся на экспериментальной стадии. Они еще не были реализованы ни в одном браузере.

Если вы скромно знакомы с CSS-препроцессорами, такими как Less или SASS , у вас будет общее представление о том, чего ожидать от этих дополнений. (Тем не менее, предлагаемый синтаксис, к сожалению, немного отличается.) В будущем у вас будет возможность создавать переменные (глобальные и локальные) и миксины, которые вы можете рассматривать как набор стилей, которые легко можно ссылки.

Насколько я помню, сообщество требовало CSS-переменных; так что же это за задержка? Одним словом: несогласие. На самом деле, еще в 2008 году, webkit играл с этой функцией – даже до того момента, когда она была реализована в ночных клубах, – но вскоре предложение зашло в тупик. Многие считали, что превращение CSS в язык, похожий на программист, вызовет лишь разочарование; некоторые даже считали, что это может смутить дизайнеров. Например, если основной цвет в вашем проекте хранится в переменной – предположительно в верхней части таблицы стилей – тогда потребуется, чтобы дизайнер ссылался на два местоположения.

1
@myColor : red;
1
2
3
4
/* Less syntax */
#someElem {
 color: @myColor;
}

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


Поклонники Less или SASS будут привыкать определять переменные следующим образом:

1
2
3
4
5
/* Less */
@primary_color : red;
 
/* SASS */
$primary_color : red;

Предложенный синтаксис немного усложняет, делая типизированными переменные. Например:

1
2
3
4
5
6
7
/* Declaration */
 @var primary_color color red;
 
/* Usage */
body {
  color: var(primary_color);
}
  • Все переменные начинаются с @var
  • Переменные набираются. Обратите внимание на использование ключевого слова color в приведенном выше коде.
  • Чтобы получить доступ к значению этой переменной, мы используем функцию var и передаем имя переменной.

Должен признать: использование директивы @var кажется немного излишним. Синтаксис, который использует SASS и Less, кажется более подходящим и понятным. @myVar более @var myVar чем @var myVar .

С другой стороны, типы переменных являются желанным дополнением.

Переменные набираются. Существуют все примитивные типы значений, каждое свойство и несколько дополнительных типов удобства. Это позволяет нам раскрывать новые CSSOM-вещи на них: document.styleSheets[0].vars['primary_color'].alpha = .5;
xanthir.com

Переменные также будут иметь возможность попадать в область объявления с помощью директивы @local . Это может быть полезно, когда переменную нужно использовать только один или два раза в проекте.

1
2
3
4
5
6
7
.box {
  /* Declaration */
  @local box_gradient background linear-gradient(top, black, white);
 
  /* Usage */
  background: var(box_gradient);
}

Дополнения могут быть невероятно полезными. На самом деле, мы недавно рассмотрели процесс создания файла классов подключений в Nettuts +. Вы можете прочитать об этом здесь, хотя имейте в виду, что методы, представленные в этой статье, основаны на препроцессоре Less. Новые эксперименты, опять же, используют немного другой синтаксис.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
/* Less */
.border-radius( @radius: 3px ) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
 
/* SASS */
@mixin border-radius($radius: 3px) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
 
/* And possibly the native solution??
@mixin border-radius(radius length 3px) {
  -webkit-border-radius: var(radius);
  -moz-border-radius: var(radius);
  border-radius: var(radius);
}

Обратите внимание на сходство между SASS и предлагаемым нативным решением для миксинов. Это связано с тем, что члены команды SASS служат советниками.

Как вы, возможно, знаете, Less и SASS позволяют вкладывать селекторы. Это может значительно уменьшить размер ваших таблиц стилей, так как устраняет необходимость повторного выбора одного и того же селектора.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* The current way */
#content { … }
#content p { … }
#content pa { … }
#content pa:hover { … }
 
/* Less and SASS */
#content {
  …
   p {
      …
      a {
         …
        &:hover { … }
      }
   }
}
 
/* And natively??
#content {
   …
   @this > p {
      …
      @this > a {
         …
         @this:hover {
            …
         }
      }
   }
}

Хотя предлагаемый синтаксис более многословный , к его чести, он имеет хороший ОО-подобный синтаксис, который заставит многих разработчиков чувствовать себя как дома.

Но помните – не все дизайнеры являются разработчиками.

По умолчанию в Less все переменные являются глобальными. В результате становится трудно распространять код, поскольку существующие имена переменных могут быть перезаписаны. Потенциальное собственное решение будет заключаться в реализации модулей или пространств имен. Затем их можно включить в блок, добавив директиву @use .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
@module Site {
   @var primary_color color #292929;
   @var secondary_color color blue;
 
   @mixin border-radius(radius length 3px) {
      …
      border-radius: 3px;
   }
}
 
/* Incorrect Usage */
body {
   color: var(primary_color);
}
 
/* Correct */
body {
   @use Site;
   color: var(primary_color);
}

Как отмечалось в начале этой статьи, перечисленная выше документация все еще находится на экспериментальной стадии. Возможно – даже вероятно – что синтаксис изменится, основываясь на ваших отзывах. Итак, давайте иметь это. Волнует ли вас идея собственных переменных в миксинах в вашем CSS … или вас пугает?

Мне? Ну я за это. Я думаю, что предложенный синтаксис может потребовать немного усилий, поскольку он, несомненно, отпугнет дизайнеров среди нас. Тем не менее, если синтаксис был немного упрощен, я на 100% на борту. Как насчет тебя?