Использование PostCSS вместе с Sass, Stylus или LESS

Если вы заинтересованы в использовании PostCSS, но вам все еще нравится ваш любимый препроцессор, не волнуйтесь. Вам не нужно выбирать между ними — вы можете использовать их рядом друг с другом.

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

Мы коснемся некоторых из этих бесплатных плагинов, а затем пройдемся по руководствам по установке, чтобы показать вам, как использовать PostCSS рядом с Sass, Stylus или LESS.

Зачем использовать оба?

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

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

autoprefixer

Было написано много микропинов препроцессора, предназначенных для вставки префиксов поставщиков. Например, вы могли использовать @include box-sizing(border-box); из библиотеки Compass для вывода правил box-sizing блоков с префиксом поставщика.

Проблема в том, чтобы полагаться на миксины для префиксов поставщиков:

1. Прежде всего, вы должны знать, что для префиксов свойств необходимо использовать префиксы.
2. Вы должны знать название соответствующего миксина и как его использовать.
3. Вы должны следить за тем, когда префиксы вендоров больше не требуются для каждого свойства (я знаю, что для длинных …

Autoprefixer устраняет эти проблемы, обрабатывая процесс префикса поставщика автоматически. Autoprefixer сканирует ваш CSS, сравнивает его с данными CanIUse.com, а затем добавляет необходимые префиксы.

Узнайте больше об Autoprefixer по адресу: https://github.com/postcss/autoprefixer

rtlcss

Генерация таблиц стилей по умолчанию и RTL (справа налево) из одного источника — это тоже то, что было сделано с препроцессорами, однако обычно требуется использование нескольких миксинов и / или интерполяция переменных в вашем коде в нескольких местах. Например, вместо того, чтобы писать margin-left: 1rem; вам может понадобиться написать margin-#{dir}: 1rem; или @include margin-left( 1rem ); ,

Однако с плагином rtlcss от Mohammad Younes вам не нужно использовать миксины или переменную интерполяцию, вы просто пишете свою таблицу стилей, как обычно, и плагин найдет все экземпляры, «правый» или «левый», и поменяет их местами. Таким образом, margin-left: 1rem; автоматически становится margin-right: 1rem; без необходимости писать какой-либо специальный код, чтобы это произошло.

Узнайте больше о rtlcss по адресу: https://github.com/MohammadYounes/rtlcss

postcss-дальтоник

С плагином postcss-colorblind от Brian Holt вы можете автоматически создавать различные версии таблицы стилей, которые дают вам из первых рук представление о том, как ваш дизайн будет выглядеть для человека с дальтонизмом. Он может имитировать восемь различных типов дальтонизма, помогая вам действительно понять, насколько доступны ваши цветовые схемы.

Это пример функциональности, которую вы действительно должны найти в PostCSS, поскольку препроцессорам было бы очень трудно это сделать.

Узнайте больше о postcss-colorblind по адресу: https://github.com/btholt/postcss-colorblind

postcss-svgo

Плагин postcss-svgo от Ben Briggs поможет вам оптимизировать встроенный SVG-код без помощи рук. Например это:

Можно свести к этому меньше половины кода:

Узнайте больше о postcss-svgo по адресу: https://github.com/ben-eb/postcss-svgo

cssnano

В то время как препроцессоры могут удалять пробелы и комментарии, пакет cssnano от Ben Briggs может выполнять все виды оптимизации, помимо этих двух этапов. Мы подробно рассмотрим cssnano в учебнике по минимизации и оптимизации .

Узнайте больше о cssnano по адресу: https://github.com/ben-eb/cssnano

postcss-шрифт-маг

Плагин postcss-font-magician от Jonathan Neal позволяет добавлять собственные шрифты так же просто, как и обычные шрифты. Вам не нужно использовать какие-либо миксины, просто добавьте правило font-family как обычно:

… и плагин будет обрабатывать полную генерацию @font-face для вас:

Узнайте больше о postcss-font-magician по адресу: https://github.com/jonathantneal/postcss-font-magician

Настройка проекта

Ниже приведены шесть руководств по настройке: руководство по Gulp и Grunt для каждого основного препроцессора. Нет необходимости читать все шесть, вы можете просто перейти к руководству по вашему предпочтительному препроцессору и инструменту сборки. Если вы не уверены, использовать ли Gulp или Grunt, Gulp определенно является более простым выбором для этого урока.

Для того чтобы вы ни следовали, вам нужно начать с пустого проекта Gulp или Grunt. О том, как настроить проекты Gulp или Grunt для PostCSS, вы можете прочитать в предыдущих уроках

• Краткое руководство по PostCSS: настройка Gulp или
• Краткое руководство по PostCSS: настройка Grunt

соответственно.

Если вы не хотите вручную настраивать свой проект с нуля, вы можете загрузить исходные файлы, прикрепленные к этому учебному пособию , и извлечь предоставленный стартовый проект Gulp или Grunt в пустую папку проекта. Затем с помощью терминала или командной строки, указывающей на папку, выполните команду npm install .

Установите плагины PostCSS в свой проект

После того, как вы настроите пустой проект для одного из разделов ниже, вам также необходимо установить два плагина PostCSS: Autoprefixer и cssnano. Вы можете сделать это, выполнив команду:

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

Предварительная обработка перед PostCSS

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

Плагины PostCSS и «Тестовый код PostCSS»

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

Чтобы сохранить повторение одного и того же кода в каждом разделе ниже, когда вы увидите инструкцию, предлагающую добавить тестовый код PostCSS, добавьте его в исходный файл препроцессора, над которым вы работаете:

В случае успеха ваш скомпилированный код в каждом случае будет выглядеть так:

Примечание : использование flexbox было автоматически префиксировано, и cssnano выполнил несколько оптимизаций кода. Мы используем тот же код для тестирования cssnano, как и в предыдущем учебном пособии по минификации и оптимизации , поэтому, пожалуйста, обратитесь к разделу «cssnano» для получения подробной информации о выполняемой оптимизации.

1. Sass + PostCSS

Поскольку вы уже работаете с Node.js для запуска Gulp или Grunt и PostCSS, самый простой способ использовать Sass вместе с ними — это сделать это через LibSass. Это также значительно быстрее, чем Ruby Sass. Мы будем развертывать LibSass через модули gulp -sass или grunt-contrib-sass .

Настройка через Gulp

Установите модуль npm install gulp-sass --save-dev в свой проект с помощью npm install gulp-sass --save-dev .

Теперь вы можете обновить ваш Gulpfile следующим образом:

Давайте разберемся с тем, что мы изменили по умолчанию для Gulpfile:

• Добавлены переменные для загрузки autoprefixer cssnano , autoprefixer и cssnano
• Добавлены переменные autoprefixer и cssnano в массив processors
• Отредактировано расширение файла в исходном файле, который мы компилируем в «.scss» вместо «.css»
• Добавлена ​​новая строка pipe() , .pipe(sass()... для обработки Sass, обязательно разместите ее перед строкой, обрабатывающей PostCSS

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

Тестовый препроцессор

Переименуйте существующий файл «src / style.css» в «src / style.scss» и добавьте в него следующий тестовый код:

Запустите gulp css и вы должны увидеть новый файл «style.css», который появится в вашей папке «dest» с содержимым:

Тестовый постCSS

Теперь добавьте тестовый код PostCSS, предоставленный ранее в этом руководстве, в свой файл «style.scss».

Запустите команду gulp css и вы должны увидеть правильный код в вашем файле «dest / style.css»:

Настройка через Grunt

В свой новый проект Grunt установите модуль grunt-contrib-sass с помощью npm install grunt-contrib-sass .

Затем добавьте для grunt.loadNpmTasks() функцию grunt.loadNpmTasks() в соответствии с существующей для PostCSS:

Теперь вам нужно настроить новое задание для обработки Sass. После этой строки:

… но перед существующей задачей postcss добавьте этот код:

Теперь мы зарегистрируем задачу, которая запустит Sass, а затем PostCSS. После только что вставленной функции grunt.loadNpmTasks() добавьте:

Тестовый препроцессор

Чтобы проверить настройки, переименуйте существующий файл «src / style.css» в «style.scss». Добавьте этот код Sass к нему:

Запустите команду grunt css и вы увидите новый файл, созданный в папке «dest» с именем «style.css» и содержащий этот код:

Настройка PostCSS

Теперь мы запустим наши плагины Autoprefixer и cssnano. Обновите массив processors вашего Gruntfile следующим образом:

Тестовый постCSS

Добавьте тестовый код PostCSS в ваш файл «style.scss», снова запустите команду grunt css и вы обнаружите, что ваш перекомпилированный файл «dest / style.css» теперь содержит правильный автоматически префиксный и оптимизированный код.

2. Стилус + PostCSS

Stylus и PostCSS особенно хорошо работают вместе благодаря созданию пакета PostStylus Шоном Кингом, который сочетает в себе обработку как Stylus, так и PostCSS. Если вы разработчик Stylus, вы можете просто добавить PostStylus в процесс компиляции и сразу получить доступ к использованию плагинов PostCSS в качестве части вашего рабочего процесса.

PostStylus: https://github.com/seaneking/poststylus

Настройка через Gulp

Если вы используете готовый Gulpfile из начального проекта, вы заметите, что он использует плагин gulp-postcss. На самом деле это только там, поскольку это необходимо для процессов установки Sass и LESS, но для Stylus нам это не понадобится, потому что вместо этого мы используем PostStylus в качестве нашего компилятора.

Вы можете удалить его из вашего проекта с помощью npm uninstall gulp-postcss --save-dev и удалить эту строку из вашего Gulpfile:

Теперь мы можем установить два плагина, которые нам нужны для компиляции Stylus и PostCSS, выполнив команду:

Обновите свой Gulpfile, чтобы он стал:

Вот что мы сделали выше:

• Добавлены переменные для загрузки poststylus gulp-stylus , poststylus , autoprefixer и cssnano
• Добавлены переменные autoprefixer и cssnano в массив processors
• Отредактировано расширение файла в исходном файле, который мы компилируем в «.styl» вместо «.css»
• Удалена .pipe() которая читает .pipe(postcss(processors))
• Заменил его на .pipe(stylus({... , чтобы установить модули gulp-stylus и poststylus для обработки нашей компиляции

Тестовый препроцессор

Теперь мы готовы проверить компиляцию. В папке «src» переименуйте «style.css» в «style.styl» и добавьте этот тестовый код стилуса:

Запустите команду gulp css и вы увидите файл «style.css», который появится в вашей папке «dest» с этим содержимым:

Тестовый постCSS

Добавьте тестовый код PostCSS, предоставленный ранее, в файл «style.styl», чтобы в вставленном коде были только отступы табуляции, а не пробелы.

Перекомпилируйте и убедитесь, что у вас есть соответствующий вывод в файле «dest / style.css».

Настройка через Grunt

Как и в случае проекта Gulp для Stylus, компилятор PostCSS по умолчанию, входящий в состав начального проекта, не требуется, поскольку он предназначен исключительно для процессов установки Sass и LESS. Вы можете удалить его из своего проекта с помощью npm uninstall grunt-postcss --save-dev .

Теперь мы можем установить grunt-contrib-stylus и poststylus с помощью команды:

Мы больше не будем использовать grunt-postcss, поэтому найдите эту строку:

И заменить его на:

Учитывая, что мы не используем grunt-postcss, это означает, что нам больше не понадобится задача postcss мы определили внутри grunt.initConfig({...}); , Удалите этот конфиг задачи и замените его новым заданием stylus :

Тестовый препроцессор

Теперь мы готовы проверить компиляцию. В папке «src» переименуйте «style.css» в «style.styl» и добавьте этот тестовый код стилуса:

Запустите команду grunt stylus и вы увидите файл «style.css», который появится в папке «dest» с этим содержимым:

Настройка PostCSS

Чтобы добавить наши плагины PostCSS в процесс компиляции, нам сначала нужно добавить этот код в самый верх нашего Gruntfile, над module.exports... :

Именно здесь вы будете загружать любые плагины PostCSS, которые вы хотите использовать, а не массив массивов processors к которому вы привыкли из других наших руководств.

Затем найдите объект options в задании стилуса и обновите его следующим образом:

Это говорит grunt-contrib-stylus использовать poststylus во время компиляции и его плагины вместе с ним.

Тестовый постCSS

Добавьте «тестовый код PostCSS» в ваш файл «src / style.styl», запустите grunt stylus , и вы увидите следующее содержимое, записанное в ваш файл «dest / style.css»:

3. LESS + PostCSS

Настройка через Gulp

Установите модуль npm install gulp-less --save-dev less в ваш проект с помощью npm install gulp-less --save-dev .

Теперь вы можете обновить ваш Gulpfile следующим образом:

Давайте разберемся с тем, что мы изменили по умолчанию для Gulpfile:

• Добавлены переменные для загрузки autoprefixer gulp-less , autoprefixer и cssnano
• Добавлены переменные autoprefixer и cssnano в массив processors
• Отредактировал расширение файла в исходном файле, который мы компилируем в «.less» вместо «.css»
• Добавлен .pipe(less()) для обработки LESS, обязательно поместите его перед строкой, которая обрабатывает PostCSS

Тестовый препроцессор

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

Переименуйте существующий файл «src / style.css» в «src / style.less» и добавьте в него следующий тестовый код:

Запустите gulp css и вы должны увидеть новый файл «style.css», который появится в вашей папке «dest» с содержимым:

Тестовый постCSS

Теперь к вашему файлу «style.less» добавьте тестовый код PostCSS, предоставленный ранее в этом руководстве.

Запустите команду gulp css и вы должны увидеть правильный код, который теперь появляется в вашем файле «dest / style.css».

Настройка через Grunt

В свой новый проект Grunt установите модуль grunt-contrib-less с помощью npm install grunt-contrib-less , затем добавьте для grunt.loadNpmTasks() функцию grunt.loadNpmTasks() в соответствии с существующей для PostCSS:

Теперь вам нужно настроить новое задание для обработки LESS. После этой строки:

… но перед существующей задачей postcss добавьте этот код:

Теперь мы зарегистрируем задачу, чтобы запустить LESS, а затем PostCSS. После только что вставленной функции grunt.loadNpmTasks() добавьте:

Тестовый препроцессор

Чтобы проверить настройки, переименуйте файл «src / style.css» в «style.less». Добавьте этот код LESS к нему:

Запустите команду grunt css и вы увидите новый файл, созданный в вашей папке «dest» с именем «style.css» и содержащий этот код:

Настройка PostCSS

Теперь мы добавим наши плагины PostCSS в поток компиляции. Обновите массив processors вашего Gruntfile следующим образом:

Тестовый постCSS

Добавьте тестовый код PostCSS в ваш файл «style.less», снова запустите команду grunt css и вы обнаружите, что ваш перекомпилированный файл «dest / style.css» теперь содержит правильный автоматически префиксный и оптимизированный код:

В следующем уроке

Далее мы собираемся проверить кое-что, что вы могли бы почти рассмотреть в качестве другого типа предварительной обработки — использование PostCSS для автоматически сгенерированных CSS-классов, соответствующих BEM / SUIT. Этот процесс значительно облегчает отслеживание разработки BEM / SUIT, не говоря уже о его эффективности.

Увидимся в следующем уроке!