PostCSS: будущее CSS

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

Но для тех, кто до сих пор не слышал о PostCSS, вот очень быстрая аналогия, написанная Ashleynolan.

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

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

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

Но имейте в виду, что PostCSS не обязательно заменяет Sass или LESS.

Что такое PostCSS?

PostCSS - это инструмент для преобразования стилей с помощью плагинов JS. Эти плагины могут анализировать ваш CSS, поддерживать переменные, миксины, преобразовывать будущий синтаксис CSS, встроенные изображения и многое другое. Это означает, что он может действовать как препроцессор, если вы этого хотите, и позволяет вам использовать инструменты, отвечающие вашим потребностям. Поэтому вам просто нужно рассматривать PostCSS как инструмент сборки, позволяющий управлять своим CSS с помощью различных плагинов JavaScript, которые вы можете найти на http://postcss.parts

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

Большинство современных разработчиков редко начинают проект с нуля. Они предпочитают фреймворк или шаблон, содержащий различные миксины, переменные и функции, у которых есть отдельные таблицы стилей для каждого из них. Это дает больше времени на то, чтобы все было организовано. Итак, Поддержание библиотеки фрагментов Sass или LESS может оказаться непосильной задачей и привести к раздутию проекта. Здесь PostCSS позволяет легко устанавливать модули plug-and-play, делая процесс разработки более гибким для уникальных потребностей проекта.

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

Преимущества

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

Добавление PostCSS в рабочий процесс

PostCSS можно легко интегрировать в ваш текущий рабочий процесс. PostCSS имеет JavaScript API, который легко интегрируется с программами запуска задач, такими как Gulp, Grunt и Web pack. В приведенном ниже руководстве показано, как включить PostCSS в рабочий процесс с помощью Gulp.

Если вы не знакомы с Gulp, я бы порекомендовал прочитать Рабочий процесс Gulp, чтобы приступить к работе с инструментом.

Для Grunt:

Https://webdesign.tutsplus.com/tutorials/postcss-quickstart-guide-grunt-setup--cms-24545

Для Webpack:

Https://github.com/postcss/postcss-loader

Давайте начнем

В gulpfile.js вашего проекта нам нужно потребовать, чтобы наш установленный модуль PostCSS запустил

$ npm install --save-dev gulp-postcss

Базовое использование

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
gulp.task('css', function () {
var processors = [
 autoprefixer({browsers: ['last 1 version']}),
 cssnano(),
];
return gulp.src('./src/*.css')
 .pipe(postcss(processors))
 .pipe(gulp.dest('./dest'));
});

Передача дополнительных опций в PostCSS

Второй необязательный аргумент gulp-postcss передается в PostCSS.

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var nested = require('postcss-nested');
var scss = require('postcss-scss');
gulp.task('default', function () {
 var processors = [nested];
 return gulp.src('in.css')
 .pipe(postcss(processors, {syntax: scss}))
 .pipe(gulp.dest('out'));
});

Чтобы запустить задачу, введите в командной строке gulp. В приведенном выше примере autoprefixer и cssnano - это плагины PostCSS.

Основные особенности нескольких плагинов PostCSS:

Автопрефиксатор

Если вы раньше использовали препроцессор (SASS / LESS), вы уже знаете, что вам больше не нужно писать все префиксы поставщиков.

Для установки документация доступна здесь: https://github.com/postcss/autoprefixer

Например, вместо того, чтобы писать

.example {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

Ты можешь просто написать

.example {
  display: flex
}

2. CSSNext - используйте синтаксис CSS завтрашнего дня

Существует плагин под названием CssNext, который помогает нам использовать некоторые функции следующей версии CSS.

Все эти функции перечислены на официальном сайте CssNext: http://cssnext.io/features/
И вы также можете поиграть с ним здесь: http://cssnext.io/playground/

:root {
  --centered: {
    display: flex;
    align-items: center;
    justify-content: center;
  };
}
.centered {
  @apply --centered;
}

//Output CSS                                                                                
.centered {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

Приведенные выше примеры - лишь основные моменты. Я буду освещать серию из 10 самых популярных плагинов PostCSS с их полной настройкой.

Так что следите за обновлениями !!

Заключение

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

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

Продолжайте взламывать !! Ура! и чтобы поддержать меня, вы можете купить мне кофе !!