Stylus. Знакомство

от
Прочие языки    stylus, css, frontend

Если вы frontend разработчик, увлекаетесь вёрсткой или просто посещаете наш форум, то наверняка слышали о препроцессорах CSS. Далее речь пойдёт о Stylus, который позиционирует себя как революционно новый язык, обеспечивающий эффективность, динамичность и элегантность вашего кода. Возможно, он не такой уж и революционный, но действительно несёт в себе интересные идеи.

Организовываем кухнюОгромное количество инструментов для фронтенда написано на Node.js, Stylus не исключение. Это открытый проект, так что вы можете собрать его из исходников, или установить из NPM:
  1. $ npm install stylus -g

Стили должны храниться в файлах с расширением .styl, очевидно, могут быть размещены где угодно в проекте. Не нужно никаких конфигурационных файлов, просто запускаем утилиту и генерируем CSS:
  1. $ stylus ./stylesheets --out ./public/css

В итоге, содержимое папки stylesheets будет скомпилировано и сохранено в директорию public/css. Чтобы не повторять этот процесс вручную, можно использовать опцию --watch:
  1. $ stylus --watch ./stylesheets --out ./public/css

Вообще говоря, есть много других полезных опций, например, конвертация уже существующего CSS в Stylus, минификация результирующего CSS, выставление префиксов классам, и прочее.

Пробуем на вкусНа первых порах вы можете писать обычный CSS в .styl файлы, постепенно осваивая новый синтаксис и крутые фичи. Это хорошая стратегия для изучения Stylus, с неё мы и начнём. Следите за движениями рук.

1 из 8Эволюция
Пусть есть следующий код:
  1. body {
  2.   font: 12px Helvetica, Arial, sans-serif;
  3. }
  4. a.button {
  5.   -webkit-border-radius: 5px;
  6.   -moz-border-radius: 5px;
  7.   border-radius: 5px;
  8. }

Существует даже понятие pythonic code, когда структура задаётся с помощью отступов. Считается, что такой код более чистый и читаемый, но как я уже сказал ранее, вы можете выбрать подходящий стиль для себя самостоятельно.

Основные ингредиентыВы скажете: зачем мне переходить на Stylus, если я вполне могу отказаться от упрощённого стиля? Я программист, дайте мне Тьюринг-полный язык! Но не будем торопить события.

Переменные. Вполне естественно, что вам захочется хранить некоторую информацию: основные цвета макета, семейство шрифтов, ширину блока на главной странице.

1 из 4Пример
Используем переменные.
  1. font-size = 14px
  2.  
  3. body
  4.    font: font-size Arial, sans-serif
Компилируется в
  1. body {
  2.   font: 14px Arial, sans-serif;
  3. }

На самом деле это плохое решение, которое используется во всех других препроцессорах (LESS, SASS). Можно сделать лучше, если использовать уже определённое свойство, без создания временных переменных.
  1. #logo
  2.   position: absolute
  3.   top: 50%
  4.   left: 50%
  5.   width: 150px
  6.   height: 80px
  7.   margin-left: -(@width / 2)
  8.   margin-top: -(@height / 2)

Миксины или примеси — это ничто иное как функции. Их задача состоит в том, чтобы подмешать в ваш элемент немного дополнительных свойств. Для объявления не нужны ключевые слова, достаточно скобок с параметрами.

1 из 3Пример
Миксины вызываются как функции, с круглыми скобками.
  1. size(w, h = w)
  2.   width: w
  3.   height: h
  4.  
  5. .foo
  6.   size(100px)

В последнем примере вы можете увидеть, что миксины переопределяют стандартные свойства в CSS. Таким образом можно прозрачно ввести поддержку старых версий браузеров (internet explorer), вендорные префиксы (webkit-, moz-), поддержку новых нереализованных стандартов. Есть даже готовый пак миксинов Nib, обеспечивающий CSS3.

В этой статье я не буду рассказывать об остальных возможностях Stylus, но просто перечислю их: вычисление выражений, селекторы в переменных, передача контекста в миксины, условные операторы в свойствах и селекторах, тернарный оператор, случайные числа / цвета / сброс кэша, всяческие расширения (вложенные правила, body { div { ... }}), работа с изображениями и генерация спрайтов, работа с цветами (осветлить, затемнить, hsv-rgb-hsl конвертации), циклы, sourcemaps для дебага.

С чем едят препроцессорыНапомню, что в самом начале мы пользовались опцией watch, чтобы не запускать процесс компиляции всякий раз вручную. Так делают только при изучении Stylus, нормальные же разработчики используют инструменты-планировщики (task runners), такие как Grunt / Gulp. Идея состоит в том, что уже они следят за состоянием вашего проекта, и в случае чего запускают нужный таск, будь то компиляция styl, или минификация js. Есть и другая стратегия, можно компилировать во время работы вашего веб-приложения, используя middleware.

Stylus — это CSS препроцессор, которого мы все ждали. В нём реализованы многие полезные возможности, по сравнению с другими решениями, он занимает лидирующую позицию, поддерживается всеми современными IDE и текстовыми редакторами напрямую или в виде плагинов. Попробуйте Stylus, уверен, он вам понравится!