CSS-препроцессор Stylus: плюсы, минусы, подводные камни / Frontend
Начиная разговор о Stylus, прежде всего стоит ответить на резонный вопрос «зачем вообще использовать препроцессор?». Все очень просто — это сэкономит твое время, а дополнительными бонусами будут:
- удобная поддержка и расширение проектов
- автоматизация рутинных задач
- «объектно-ориентированный» css
- возможность быстро создавать «темы» для интерфейсов
На сегодняшний день самыми популярными препроцессорами являются SASS, LESS и Stylus. О первых двух написано довольно много, а вот Stylus незаслуженно обделен вниманием, несмотря на то, что имеет ряд преимуществ :
- написан на родном для фронтендеров языке javascript
- позволяет использовать БЭМ без головной боли
- обладает самым демократичным синтаксисом — только отступы, только хардкор
- неплохое наследование, отличные миксины и, конечно, функции, операторы, итераторы и все-все-все
npm install stylus
Порог вхождения минимален. Не верь мифам, что для использования css-препроцессоров необходимо долго привыкать к новому синтаксису — все максимально просто и интуитивно понятно. Имеется простое и удобно javascript api, а также одноименное консольное приложение с режимом watch. Выполнил в консоли
stylus -w file.styl
и можно забыть о компиляции, просто сохраняй styl-файл, новый css будет генерироваться автоматически. Пиши градиент в одну строку, конвертируй картинки в data-uri, забудь про постоянное обновляющиеся вендорные префиксы!
При работе со Stylus полезными могут оказаться плагин для sublime text, а также таск для сборщика Grunt.js. И абсолютно точно тебе не обойтись без фреймворка nib, который упрощает кросс-браузерную поддержку CSS3.
Теперь перейдем к недостаткам, их тоже хватает:
- скудное коммьюнити
- все непросто с автоматической генерацией спрайтов(об этом поговорим подробнее в следующий раз)
- наследование только классов, которые были описаны выше
- продукт очень молодой и потому имеет немало багов, но стоит отметить, что фиксятся они крайне быстро
Кстати, совсем недавно создатель stylus и nib рассказал о своем новом проекте — модульном препроцессоре rework, который должен порадовать пользователей еще большей скоростью компиляции и возможностью писать собственные модули.