Настало время познакомиться с препроцессором Stylus. Ниже привожу перевод статьи от David Walsh, посвященную малоизвестному, но крайне полезному препроцессору Stylus. Оригинал статьи размещен здесь - Getting Started with Stylus
В среде web-разработчиков можно часто и постоянно слышать только о двух препроцессорах: Sass и LESS. Однако, существует еще один препроцессор, о котором слышно совсем не так часто - это Stylus. При редизайне Mozilla Developer Network мною был выбран Stylus по нескольким причинам:
- так как Stylus основан на Node.js, то отпадает необходимость в использовании сторонней технологии (Sass требует для своей работы Ruby)
- Stylus предоставляет набор JavaScript API, что делает возможным дальнейшую настройку этого инструмента
- синтаксис Stylus не нуждается в скобках (brackets), запятых (comma), двоеточиях (colons), точках с запятыми (semicolon) - он целиком и полностью основан на использовании табуляции и пробелов; но если необходимо использовать любой из видов пунктуаций, то его можно легко применить в Stylus - компиляция произойдет корректно
- под препроцессор Stylus имеется готовая библиотека миксинов (mixin) под названием Nib
Установка Stylus
Препроцессор Stylus является Open Source проектом, расположенным на GitHub, поэтому его можно легко установить как из исходных файлов, так и с помощью менеджера пакетов 1
npm
$ sudo npm install stylus -gCSS-файлы, созданные при помощи синтаксиса Stylus, должны иметь расширение 1
.styl
1
stylus
$ stylus app/main.styl --out /dist --compressПредставленная выше команда выполняет компиляцию исходного stylus-файла 1
main.styl
1
/dist
1
main.styl
1
main.styl
1
main.css
1
/dist
Утилита 1
stylus
1
--watch
$ stylus --watch app/main.stylКак можно догадаться, у программы 1
stylus
Но приступим к рассмотрению самого главного, ради чего и затевался данный перевод - синтаксису и возможностям препроцессора Stylus
Основы синтаксиса Stylus
Синтаксис Stylus очень похож на синтаксис остальных препроцессоров (Sass или LESS). Но давайте более детально рассмотрим, что он из себя представляет на деле:
/* Простая переменная */
base-font-size = 12px
/* Инициализация переменной с помощью вызова миксина */
body-background = invert(#ccc)
/* Селектор и набор правил для него */
body
color #333
background #fff
/* Вложенность правил */
nav
margin 10px
ul
list-style-type none
> li
display inline-block
&.current
background-color lightblue
/* Использование вычисляемых значений */
div.column
margin-right (grid-spacing / 2)
margin-top (grid-spacing * 2)
/* Использование ранее установленного значения */
div.center-column
width 200px
margin-left -(@width / 2)
/* Задание значений, полученных как результат вычислений миксинов */
.promo
apply-promo-style()
apply-width-center(400px)
/* Итерация в цикле */
table
for row in 1 2 3 4 5
tr:nth-child({row})
height 10px * row
/* Другой вариант итерации в цикле */
for row in (1..5)
tr:nth-child({row})
height 10px * row
/* Импортирование в Stylus-файл другой таблицы стилей в формате Stylus */
@import "links.styl"
/* extend существующего класса */
.warning
@extend .blockВ принципе, ничего нового в вышесказанном нет - все эти моменты также существуют в других препроцессорах. Если вдруг в синтаксисе не достает скобок, двоеточий или запятых, то их можно смело добавлять в код - препроцессор Stylus вас прекрасно поймет и в этом случае.
Создание и использование миксинов
Миксины чрезвычайно полезны по нескольким причинам. Благодаря им при написании стилей на CSS можно использовать логику, а также структурировать код.
Создание миксинов в Stylus является простой задачей, а синтаксис миксинов именно такой, какой и ожидалось увидеть:
/* Простой миксин для добавления вендорных префиксов.
Использование:
vendorize(box-sizing, border-box)
*/
vendorize(property, value)
-webkit-{property} value
-moz-{property} value
-ms-{property} value
{property} valueПри создании миксинов под Stylus можно задать значения по умолчанию для аргументов:
/* Миксин создания треугольника на CSS */
generate-arrow(arrow-width = 10px)
&:before, &:after
content ''
height 0
width 0
position absolute
border arrow-width solid transparentМиксин может возвращать вычисляемое значение с помощью ключевого слова 1
return
/* Миксин для задания стилей к текущему элементу и дочерним элементам текущего элемента */
special-homestyles(background = '#ccc')
background-color background
a
color lightblue
&.visited
color navyИ конечно же, внутри миксинов можно использовать условия (впрочем, как и в любом другом месте кода на Stylus):
/* Миксин создания grid на основе минимального\максимального значений и инкремента */
generate-grid(increment,start,end,return-dimension=false)
total = start
for n, x in 0..((end - start) / increment)
if return-dimension
if x+1 is return-dimension
return total
else
.column-{x+1}
width total
total = total + incrementПредставленный выше миксин генерирует grid на основе минимального значения (минимальной ширины столбца), максимального значения (максимальной ширины столбца) и количества столбцов (которое изменяется с помощью инкремента). Последний аргумент return-dimension служит для указания того, будет ли миксин просто возвращать полученное значение, не создавая CSS-классов.
Полезные миксины Stylus
При работе над проектом MDN мне потребовалось большое количество полезных миксинов под Stylus, например таких, как поддержка RTL, поддержка локализации, а также поддержка большого числа браузеров. Ниже я представлю некоторые из этих миксинов - возможно, они пригодятся на практике некоторым из читателей.
Обнуление last child
Данный миксин был создан для обнуления пустого пространства у последнего элемента блока-родителя. Как правило, такими пространствами в CSS являются 1
padding-bottom
1
margin-bottom
/* Удаление пустого пространства у элемента, если он является последним у своего родителя */
prevent-last-child-spacing(element="*", property="padding-bottom")
if element is "*"
element = unquote(element)
& > {element}:last-child
{property} 0С помощью этого миксина устанавливается 1
margin
1
padding
Стилизация placeholder
Стилизация placeholder является достаточно хитрой задачей из-за необходимости использования вендорных префиксов, поэтому использование миксина значительно упрощает эту задачу:
set-placeholder-style(prop, value)
&::-webkit-input-placeholder
{prop} value
&::-moz-input-placeholder
{prop} valueЗаключение
На этом перевод закончен.
От себя могу добавить.
Под Sublime Text 3 имеется плагин Stylus для подсветки синтаксиса и автоматической табуляции. Если планируется дальнейшая работа в Stylus, то данный плагин обязателен к установке - без него просто тяжело и долго кодить.
Плагин Emmet имеет поддержку синтаксиса Stylus (меня Emmet не перестает радовать). Все горячие клавиши Emmet остались неизменными и под Stylus, как если бы я кодил в старом добром CSS.
На моем любимом YouTube-канале Level Up Tuts недавно вышла небольшая серия видео-обзоров по Stylus - Stylus Tutorials
На этом все.
