Stylus. Знакомство
от Ксакеп
Если вы frontend разработчик, увлекаетесь вёрсткой или просто посещаете наш форум, то наверняка слышали о препроцессорах CSS. Далее речь пойдёт о Stylus, который позиционирует себя как революционно новый язык, обеспечивающий эффективность, динамичность и элегантность вашего кода. Возможно, он не такой уж и революционный, но действительно несёт в себе интересные идеи.
Организовываем кухнюОгромное количество инструментов для фронтенда написано на Node.js, Stylus не исключение. Это открытый проект, так что вы можете собрать его из исходников, или установить из NPM:
Стили должны храниться в файлах с расширением .styl, очевидно, могут быть размещены где угодно в проекте. Не нужно никаких конфигурационных файлов, просто запускаем утилиту и генерируем CSS:
В итоге, содержимое папки stylesheets будет скомпилировано и сохранено в директорию public/css. Чтобы не повторять этот процесс вручную, можно использовать опцию --watch:
Вообще говоря, есть много других полезных опций, например, конвертация уже существующего CSS в Stylus, минификация результирующего CSS, выставление префиксов классам, и прочее.
Пробуем на вкусНа первых порах вы можете писать обычный CSS в .styl файлы, постепенно осваивая новый синтаксис и крутые фичи. Это хорошая стратегия для изучения Stylus, с неё мы и начнём. Следите за движениями рук.
Существует даже понятие pythonic code, когда структура задаётся с помощью отступов. Считается, что такой код более чистый и читаемый, но как я уже сказал ранее, вы можете выбрать подходящий стиль для себя самостоятельно.
Основные ингредиентыВы скажете: зачем мне переходить на Stylus, если я вполне могу отказаться от упрощённого стиля? Я программист, дайте мне Тьюринг-полный язык! Но не будем торопить события.
Переменные. Вполне естественно, что вам захочется хранить некоторую информацию: основные цвета макета, семейство шрифтов, ширину блока на главной странице.
На самом деле это плохое решение, которое используется во всех других препроцессорах (LESS, SASS). Можно сделать лучше, если использовать уже определённое свойство, без создания временных переменных.
Миксины или примеси — это ничто иное как функции. Их задача состоит в том, чтобы подмешать в ваш элемент немного дополнительных свойств. Для объявления не нужны ключевые слова, достаточно скобок с параметрами.
В последнем примере вы можете увидеть, что миксины переопределяют стандартные свойства в 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, уверен, он вам понравится!
Организовываем кухнюОгромное количество инструментов для фронтенда написано на Node.js, Stylus не исключение. Это открытый проект, так что вы можете собрать его из исходников, или установить из NPM:
- $ npm install stylus -g
Стили должны храниться в файлах с расширением .styl, очевидно, могут быть размещены где угодно в проекте. Не нужно никаких конфигурационных файлов, просто запускаем утилиту и генерируем CSS:
- $ stylus ./stylesheets --out ./public/css
В итоге, содержимое папки stylesheets будет скомпилировано и сохранено в директорию public/css. Чтобы не повторять этот процесс вручную, можно использовать опцию --watch:
- $ stylus --watch ./stylesheets --out ./public/css
Вообще говоря, есть много других полезных опций, например, конвертация уже существующего CSS в Stylus, минификация результирующего CSS, выставление префиксов классам, и прочее.
Пробуем на вкусНа первых порах вы можете писать обычный CSS в .styl файлы, постепенно осваивая новый синтаксис и крутые фичи. Это хорошая стратегия для изучения Stylus, с неё мы и начнём. Следите за движениями рук.
 из 8 | Эволюция |
Существует даже понятие pythonic code, когда структура задаётся с помощью отступов. Считается, что такой код более чистый и читаемый, но как я уже сказал ранее, вы можете выбрать подходящий стиль для себя самостоятельно.
Основные ингредиентыВы скажете: зачем мне переходить на Stylus, если я вполне могу отказаться от упрощённого стиля? Я программист, дайте мне Тьюринг-полный язык! Но не будем торопить события.
Переменные. Вполне естественно, что вам захочется хранить некоторую информацию: основные цвета макета, семейство шрифтов, ширину блока на главной странице.
| из 4 | Пример |
На самом деле это плохое решение, которое используется во всех других препроцессорах (LESS, SASS). Можно сделать лучше, если использовать уже определённое свойство, без создания временных переменных.
- #logo
- position: absolute
- top: 50%
- left: 50%
- width: 150px
- height: 80px
- margin-left: -(@width / 2)
- margin-top: -(@height / 2)
Миксины или примеси — это ничто иное как функции. Их задача состоит в том, чтобы подмешать в ваш элемент немного дополнительных свойств. Для объявления не нужны ключевые слова, достаточно скобок с параметрами.
| из 3 | Пример |
В последнем примере вы можете увидеть, что миксины переопределяют стандартные свойства в 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, уверен, он вам понравится!
