CSS-препроцессор Stylus: плюсы, минусы, подводные камни / Frontend


Начиная разговор о Stylus, прежде всего стоит ответить на резонный вопрос «зачем вообще использовать препроцессор?». Все очень просто — это сэкономит твое время, а дополнительными бонусами будут:

  • удобная поддержка и расширение проектов
  • автоматизация рутинных задач
  • «объектно-ориентированный» css
  • возможность быстро создавать «темы» для интерфейсов


На сегодняшний день самыми популярными препроцессорами являются SASS, LESS и Stylus. О первых двух написано довольно много, а вот Stylus незаслуженно обделен вниманием, несмотря на то, что имеет ряд преимуществ :
  • написан на родном для фронтендеров языке javascript
  • позволяет использовать БЭМ без головной боли
  • обладает самым демократичным синтаксисом — только отступы, только хардкор
  • неплохое наследование, отличные миксины и, конечно, функции, операторы, итераторы и все-все-все
Если в твоей системе уже есть node.js и npm, то процесс установки займет всего лишь несколько секунд, просто выполни в консоли команду:
npm install stylus

Порог вхождения минимален. Не верь мифам, что для использования css-препроцессоров необходимо долго привыкать к новому синтаксису — все максимально просто и интуитивно понятно. Имеется простое и удобно javascript api, а также одноименное консольное приложение с режимом watch. Выполнил в консоли
stylus -w file.styl

и можно забыть о компиляции, просто сохраняй styl-файл, новый css будет генерироваться автоматически. Пиши градиент в одну строку, конвертируй картинки в data-uri, забудь про постоянное обновляющиеся вендорные префиксы!
При работе со Stylus полезными могут оказаться плагин для sublime text, а также таск для сборщика Grunt.js. И абсолютно точно тебе не обойтись без фреймворка nib, который упрощает кросс-браузерную поддержку CSS3.
Теперь перейдем к недостаткам, их тоже хватает:
  • скудное коммьюнити
  • все непросто с автоматической генерацией спрайтов(об этом поговорим подробнее в следующий раз)
  • наследование только классов, которые были описаны выше
  • продукт очень молодой и потому имеет немало багов, но стоит отметить, что фиксятся они крайне быстро
Как видно, ни одна из этих проблем не соизмерима с огромной пользой, которую можно извлечь, используя Stylus. В целом, это очень мощный и удобный инструмент, способный сделать работу фронтенд-разработчика более эффективной и приятной.
Кстати, совсем недавно создатель stylus и nib рассказал о своем новом проекте — модульном препроцессоре rework, который должен порадовать пользователей еще большей скоростью компиляции и возможностью писать собственные модули.