Сообщество веб-разработчиков недавно получило несколько важных новостей . Хотя еще не в ночных вечерах, снова проводятся эксперименты, которые в случае успеха предоставят нам встроенную поддержку переменных, миксинов и модулей CSS в браузерах. Вопрос, правда, это хорошо?
Pros
- Поддерживать проекты проще
- Напиши меньше «код»
- Более упорядоченная интеграция с JavaScript
- Обновите настройки и параметры для всего сайта с одним изменением значения
Cons
- Должен ли 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);
}
|
Mix-модули
Дополнения могут быть невероятно полезными. На самом деле, мы недавно рассмотрели процесс создания файла классов подключений в 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% на борту. Как насчет тебя?