Расширяем Sass с помощью PostCSS

Недавно в Twitter мне задали вопрос - "Почему вы используете PostCSS совместно с Sass, что это вам дает?". Поэтому я решил написать небольшую статью о том, как я использую PostCSS в сочетании с Sass.

Краткий обзор

Краткая аналогия для тех, кто никогда не слышал о PostCSS.

Представим что препроцессоры, такие как Sass, это полностью построенный дом. Вы знаете все его особенности, так как он уже полностью сформирован и все его комнаты заранее определены. Однако, добавление новых комнат и возможностей для дома, будет сложной задачей.

А PostCSS - это небольшой, свободный участок земли и поддон кирпичей. Вы можете создать все что вы хотите, с теми особенностями, которые вам необходимы.

Sass является полнофункциональным препроцессором с рядом замечательных особенностей. PostCSS является инструментом, который позволяет добавлять PostCSS плагины, благодаря которым вы сможете разными способами управлять вашим CSS кодом.

Ни один из них не является "правильным" инструментом для использования. Многое зависит от вашей ситуации, задачи и предпочтений.

Дополняем Sass

Большенство статей, сравнивают возможности PostCSS, с эквивалентными возможностями Sass, но PostCSS не должен использоваться в качестве альтернативы Sass. Вместо этого он может быть использован для добавления дополнительных функций в рабочий процесс, которых нет в Sass.

Эти дополнительные функции могут работать до или после компиляции Sass, а PostCSS может спарсить как SCSS так и простой CSS.

В качестве примера, многие разработчики используют Autoprefixer для добавления префиксов к CSS коду. Некоторые используют Autoprefixer как плагин Gulp или Grunt, но на самом деле, это плагин PostCSS, который преобазован для использования в Task-runner.

Я рекомендую всем, кто использует Autoprefixer установить его непосредственно через PostCSS - это не сложнее, чем установка эквивалентного плагина Gulp/Grunt. После установки, вы сможете легко экспериментировать с другими плагинами PostCSS. PostCSS довольно новый инструмент, поэтому вы можете найти для себя новые плагины, которые помогут вам в работе.

Еще один удобный плагин, который я использую postcss-assets, он встраивает графические файлы в CSS код в качестве URI данных. Это позволяет мне сохранять ссылку на исходный файл изображения в SCSS файлах, преобразуя его, как часть PostCSS, для обеспечения лучшей производительности страницы.

Есть множество других полезных плагинов PostCSS, например минификация CSS, оптимизация SVG, создание простых стайлгайдов.

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

SCSS Lint

Лучший Linter для Sass который я смог найти, это SCSS-lint.

При поиске альтернатив, я наткнулся на Stylelint - PostCSS Linter плагин, так как он работает на PostCSS, не зависим от других языков (разработан на JavaScript), в точности то, что я искал.

Теперь в своих проектах, я работаю с PostCSS до и после компиляции Sass. Я заранее запускаю код Stylelint, а затем, после компиляции SCSS в CSS, я запускаю все необходимые PostCSS плагины, например Autoprefixer.

В Gulp это выглядит следующим образом:

return gulp.src( ['/**/*.scss'] )
    // Задачи PostCSS до компиляции Sass
    .pipe(
        postcss([
            stylelint(),
            reporter({ clearMessages: true, throwError: true })
        ],
        { syntax: scss })
    )

    // Sass компиляция
    .pipe( sass({
        errLogToConsole: true
    }) )

    // Задачи PostCSS после компиляции Sass
    .pipe( postcss([
        assets({ loadPaths: [ IMG_SRC_PATH ] }), // Converts any specified assets to data URIs
        autoprefixer({ browsers: ['> 5%', 'last 2 versions', 'ie > 7'] }) // Autoprefixes CSS properties for various browsers
        … // any other PostCSS plugins to be run can be added in here
    ]) )
    .pipe( gulp.dest( CSS_DEST_PATH ) );

Я надеюсь, что эта статья помогла вам объяснить, как функции PostCSS могут быть использованы в дополнение к препроцессору, такому как Sass.

Перевод статьи Extending Sass with PostCSS

Тэги: sassscsspostcssgulpgrunt

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.