Stylus - знакомство с препроцессором

Настало время познакомиться с препроцессором 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 -g

CSS-файлы, созданные при помощи синтаксиса 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

На этом все.