Переход с SCSS на PostCSS: мой опыт

Прямо сейчас я начинаю верстать новый проект. Я решила, что это хороший повод познакомиться с новой для себя технологией, поэтому выбрала в качестве препроцессора PostCSS. Меня привлекает в нем скорость работы и модульность, однако до сих пор не было случая попробовать его на реальном проекте. Сейчас в основном я использую Sass, и невозможность (хоть и временная) использовать node-sass с шестой версией Node.js, и то, как из-за этого у меня поломались стили в проекте, тоже послужило причиной поиска альтернатив.

Для начала расскажу, как сейчас у меня выглядит работа со стилями.

Как я сейчас работаю со стилями

Есть основной файл, main.scss, в который подключаются все остальные файлы стилей, разделенные по папкам. Я использую систему папок, похожую на модель 7-1, с некоторыми отличиями: у меня почти никогда нет папки vendors/ (вместо нее я подключаю сторонние библиотеки через npm), а также папки themes/ (даже в больших проектах у меня не было необходимости выделять отдельные темы). В папке components/ я создаю отдельный файл для каждого нового класса компонентов.

Сборку делаю через Gulp. Для импорта стилей использую gulp-sass-glob, чтобы можно было импортировать папки со стилями целиком, например: @import "../components/**/*.scss";.

В больших проектах использую миксины Bourbon. К собранным стилям применяю автопрефиксер.

Единообразие написания стилей и отсутствие в них ошибок проверяется при помощи Stylelint или SCSS-lint в виде плагина для редактора Atom (вот мой конфиг .scss-lint.yml, основанный на Sass Guidelines). При помощи CSSCombэтого плагина для редактора) я автоматически сортирую CSS свойства (конфиг настроен в соответствии с линтером).

Готовый файл минифицируется через CSS Nano в виде плагина для Gulp.

В идеале, мне бы хотелось получить такую конфигурацию, которая будет работать с уже написанными стилями с SCSS-синтаксисом, и чтобы не не нужно было менять привычки написания стилей. Потом, возможно, я подумаю над другими вариантами, но моя задача сейчас – сделать подобие SCSS, но через PostCSS. То есть, мне нужно:

  • объявление переменных как $,
  • вложенность стилей, возможность использовать конструкции вида &__elem,
  • миксины, желательно с синтаксисом как в SCSS (@include mixin-name),
  • импорт папок целиком, а не по отдельным файлам
  • не критично, но было бы приятно, найти аналоги того, что я делаю через Bourbon; но в крайнем случае можно написать функции самостоятельно

И еще, чтобы был линтер, и все это собиралось бы через Gulp, и быстрее, чем SCSS. В будущем я рассматриваю возможность перехода на NPM-скрипты.

Переход к PostCSS

Как выяснилось, я уже использую два, а в некоторых случаях три инструмента из экосистемы PostCSS: это Автопрефиксер, CSS Nano, и иногда Stylelint. Отлично. Осталось найти что-то, что позволит заменить SCSS.

Как я уже писала, одно из преимуществ PostCSS это модульность, то есть для решения каждой отдельной проблемы существует свой плагин, а если не существует, то его можно написать самостоятельно. Большое количество плагинов размещено здесь.

Синтаксис

Среди плагинов я нашла Precss, который позволяет использовать синтаксис из Scss. Однако его возможности мне показались избыточными, из Scss мне нужны только импорт, переменные, вложенность и миксины. Поэтому я решила взять по отдельности плагины postcss-partial-import, postcss-simple-vars, postcss-nested, postcss-mixins.

К сожалению, мне пока не удалось найти плагин, который бы мог импортировать содержимое директории целиком.

Приятно порадовал плагин stylefmt, который является заменой для CSS Comb и может форматировать стили в соответствии с конфигом от Stylelint. Кроме того, он есть в виде плагина для Атома.

Установка

Вроде бы все нашлось. Теперь можно установить плагины и настроить таск для сборщика Gulp. Я начну с установки плагинов, которые позволят использовать привычный синтаксис, а потом добавлю остальное.

Потестировала, все работает. Значит, можно добавить CSSNano для минификации.

В итоге, таск у меня получился такой:

Теперь надо добавить линтер и инструмент для форматирования кода. Я хочу, чтобы ошибки в стилях выводились в консоли и в редакторе, поэтому надо установить плагин Stylelint для Атома, настроить таск для Gulp, и создать файл конфига .stylelintrc. Устанавливается все просто.

А вот с конфигом придется помучиться. Все возможные правила перечислены тут, но создавать их придется вручную. Я для начала установила stylelint-config-standard, npm install -D stylelint-config-standard и прописала в файле .stylelintrc его использование:

Когда будет время, проверю его соответсвтие со своим конфигом для SCSS-lint.

Таск для линтера стилей получился такой:

Добавим инструмент для форматирования кода. Тут, на самом деле, я не до конца разобралась, может ли плагин для Атома работать без установленного npm-пакета.

Вроде бы, все работает. Для удобства, вот в виде отдельной команды все пакеты, которые я поставила:

И плагины для Атома:

Все это позволило мне начать проект с привычным мне подходом, но используя PostCSS вместо SCSS. Пока что тестирую, и присматриваюсь. Не исключаю, что во всех новых проектах буду использовать эти инструменты.




26 комментариев к “Переход с SCSS на PostCSS: мой опыт”

  1. talgaut

    А почему используешь какой-то полу es6 ?) стрелочные функции, импорт в место реквайр, не?

    Ответить
  2. Андрей Ситник

    Кстати, можно взять PreCSS — это уже готовый пакет плагинов для замены Sass

    https://github.com/jonathantneal/precss

    Хотя, конечно же, там не будет выбора и модульности 🙂

    Ответить
    • Ирина

      Да, я видела PreCSS, но он мне показался избыточным для моих задач – циклы, условия, и extends не использую очень редко, почти никогда.

      Ответить
  3. YozhEzhi

    Ирина, а можете выложить gulpfile.js в gist?
    Спасибо.

    Ответить
  4. Andrey

    Вот бы еще можно было бы использовать в таком случае Foundation и Bootstrap, тогда сделал бы полный переход. А пока, увы, SASS -> CSS -> PostCSS – > CSS

    Ответить
  5. Александр

    Я конечно очень далёк от всех этих стилей и кодов, но ваши стать всё равно читаю. Ведь надо учиться понемногу.

    Ответить
  6. Mike

    Не могу уйти с SCSS полностью из-за любви к Susy.

    Ответить
  7. Константин

    Ирина, Вы, конечно, молодец и все такое (не стеб), но ответьте на простой вопрос, а оно того стоило? Был ли какой-то реальный выигрыш от перехода или это дано моде, которая пройдёт. Мы для своих проектов делали верстку на gulp и scss, но подходит время для редизайна и предстоит выбирать стек технологий, собственно поэтому и спрашиваю

    Ответить
    • Ирина

      Если коротко: мне нравится.

      В отличие от автора выше, у меня нет зависимости от Sass, кроме синтаксиса. Я очень редко, а последние несколько месяцев почти никогда, использую сетки типа Susy и миксины Bourbon, а Bootstrap не использую совсем уже пару лет – мне проще написать все самой, плюс есть некоторые собственные наработки. Как сделать такой же синтаксис, как в SCSS, я написала в этой статье.

      К “реальному выигрышу” я могу отнести более быструю сборку (субъективно, примерно в полтора-два раза, но я не замеряла), и возможность использовать CSS Modules.

      Ответить
    • Slawka

      короче отбой, выгоды нет, люди балуются технологиями 🙂 scss (node-sass) как основной препроцессор, с адекватной документацией и поддержкой, и можно обвесить postcss плагинами типа префиксира и линтера, как в принципе все и делают на больших долгоиграющих проектах

      Ответить
      • Ирина

        Ну я так и написала, что просто хочу попробовать 🙂 Я никого ни к чему не призываю, просто поделилась своим опытом, если кто-то такой же как я тоже захочет попробовать PostCSS.

        Ответить
  8. Sergey

    node-sass v3.7 работает с Node 6
    https://github.com/sass/node-sass/releases/tag/v3.7.0

    Ответить
  9. никита

    Спасибо,эта статья отличный источник актуальной информации для новичков во фронтенде. Я просто скопирую ваш подход ахах

    Ответить
  10. Виталий

    Спасибо за статью, было интересно почитать.

    Ответить
  11. Игорь

    Любит наш народ всякое г…о))) Фронтендеры с ума сходят. Теперь миллион пятьсот плагинов и зависимостей без адекватной доки написанные черт знает кем – лучше хорошего инструмента.

    Ответить
    • Ирина

      Отлично, все с ума сходят, и один Вы прав. По поводу “написаны чёрт знает кем” – это Open Source, и тот же Sass/LESS, или что Вы считаете “хорошим инструментом”, тоже разрабатываются сообществом. Если Вам не что-то не нравится, никто не заставляет Вас это использовать, но и писать оскорбительные комментарии – тоже.

      Ответить
      • Игорь

        Прошу прощения, не хотел никого обидеть, просто немного иронии.
        PostCSS – не замена SASS, сравнивать их нельзя. Для PostCSS есть 15 плагинов (объеденных в один “precss”) для поддержки “Sass-like” синтаксиса.
        PostCSS – незаменимый инструмент, Вы и сами писали, что уже использовали его в работе. Но я хотел бы предупредить Ваших читателей, что более надежно будет использовать два отличных инструмента вместе, а не 15 плагинов.
        Кстати, про скорость работы – вранье)) Да и как сравнивать скорость при двух разных подходах.
        Поделюсь отличным выступлением автора PostCSS:
        https://www.youtube.com/watch?v=qhouBGNncGQ

        Ответить
        • Ирина

          И Вы извините, к сожалению, интонации очень трудно угадываются, когда текст письменный 🙁
          Я не думаю, что надо полностью отказаться от Sass. Просто мне было интересно сделать проект полностью на PostCSS, воссоздав привычный для себя синтаксис.
          За ссылку спасибо 🙂

          Ответить
  12. aalexeev

    А почему ты не используешь cssnext? http://cssnext.io/
    Огромный плюс PostCSS – возможность использовать будущий синтаксис, который станет стандартом, а не препроцессорный язык, который когда-нибудь умрёт.
    CSS-переменные, специальные медиа-конструкции, упрощенное использование calc, цветовые функции — это же всё так здорово!

    Ответить
  13. Зенков Андрей

    Через PostCSS довольно удобно делать проект в привычном синтаксисе, не меняя ничего. Пользуюсь им всегда

    Ответить
  14. Eduard

    Я за 2 гoда работы в kpyпной koмпании cтoльko нe имeла ckолbko здесь. Aвтoр спаcибо тeбe большое. Именно cейчaс я тoчнo пepестaнy занимaтbcя eрундой с этими таблeтkами)))) A то и нa дeтeй вpeмeни нe хватaло с тakoй подрабoткoй. Тeпeрb пoдaрков смогу всем нaкупить и доkазaтb что дeнbги в интернeте можнo иметb!

    Ответить

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