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

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

stylus
На сегодняшний день самыми популярными препроцессорами являются 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, который должен порадовать пользователей еще большей скоростью компиляции и возможностью писать собственные модули.

2 комментария

avatar
Почему мне, как разработчику уже использующему LESS \ SASS (нужное подчеркнуть), стоит всерьез задуматься о переходе на эту технологию?

И специальный вопрос от виндо-юзеров: как использовать Stylus, если нет желания ставить Node.js?
avatar
На этот вопрос я попытался ответить во втором абзаце. Видимо, плохо получилось) Попробую пояснить подробнее:
1) он написан на js — можно легко и просто допилить под свои нужды или поучаствовать в его разработке. Это преимущество по сравнению с сассом.
2) его принцип раскрытия каскада позволяет легко и прозрачно использовать бэм-нотацию при верстке. В сассе этого никогда не будет
3) самый простой синтаксис — только отступы и переносы. это огромный плюс по сравнению с консервативным лессом
4) миксины реализованы намного удобнее, нежели чем в сассе.
В остальном, выбор препроцессора — это вопрос вкуса или сложившихся в компании традиций.

Насколько мне известно, есть реализация стилуса на руби, но тогда, соответственно, надо будет устанавливать его) Кроме того, есть онлайн-сервис для компиляции css на страничке стилуса. Еще могу посоветовать вот такой забавный веб-сервис styl.herokuapp.com/. Но лично я рекомендую все же поставить ноду, с помощью вотчера действительно удобно работать.

Оставить комментарий