От автора: у нас есть Sass, LESS, Stylus, зачем нам препроцессор PostCSS? У Sass есть свой уникальный синтаксис, а у PostCSS нет особых ограничений по написанию стилей. Это больше инструмент трансформации CSS. Трансформации в PostCSS осуществляются с помощью плагинов, написанных на JS. Входящий CSS конвертируется в дерево, которое потом трансформируется плагинами. Конечный этап заключается в обратной конвертации дерева в CSS при помощи PostCSS.
Вернемся к нашему вопросу: зачем нужен PostCSS? PostCSS быстрее, имеет модульную структуру, и в отличие от существующих препроцессоров, более гибкий.
Быстрее Sass
На странице PostCSS на github есть тесты производительности. Ниже приведены результаты тестов.
Четко видно, PostCSS выигрывает у всех, он вдвое быстрее Sass.
Модульная структура
Сила PostCSS в экосистеме плагинов. В каталоге PostCSS есть несколько категорий плагинов, в том числе цвета, шрифты, сетки, изображения, медиа запросы и Sass. В каждой категории есть плагины.
PostCSS конвертирует обычный CSS в абстрактное синтаксическое дерево (AST), а каждый плагин вносит в него свои трансформации. После завершения всех трансформаций дерево конвертируется обратно в CSS, который можно рендерить в браузере. Каждый плагин вносит свои небольшие трансформации, что делает структуру PostCSS модульной.
Гибкость
PostCSS гибкий. У него нет своего синтаксиса, зато он поддерживает функции из других препроцессоров типа Sass. Также есть целая категория плагинов Sass. Среди популярных функций Sass, поддерживаемых этими плагинами являются.
simple-vars – плагин, поддерживающий Sass-подобные переменные.
simple-extend – плагин, «расширяющий» классы CSS.
nested – плагин, разворачивающий вложенные правила.
mixins – плагин, подключающий миксины.
Также есть плагин less-engine, трансформирующий Less в CSS. Помимо поддержки существующих синтаксисов, PostCSS позволяет любому написать свой плагин и опубликовать его в каталоге.
Начинаем работать с PostCSS
У PostCSS есть командная строка (CLI), которую можно поставить через NPM.
|
1 |
npm install -g postcss-cli |
PostCSS трансформирует CSS при помощи плагинов. Autoprefixer – популярный плагин, добавляющий вендорные префиксы в CSS правила. В код ниже необходимо добавить вендорные префиксы.
|
1 2 3 |
p { display: flex } |
Установите Autoprefixer через NPM.
|
1 |
npm install -g autoprefixer |
Для запуска PostCSS нужно прописать следующие параметры.
—use задает плагин.
—output задает выходной файл.
|
1 |
postcss --use autoprefixer --output output.css input.css |
В выходном CSS прописаны все вендорные префиксы.
|
1 2 3 4 5 |
p { display: -webkit-box; display: -ms-flexbox; display: flex } |
Теперь перейдем к нашему проекту. Среди популярных конструкторов можно выделить Webpack, Gulp и Grunt. В этом уроке мы будем учиться использовать PostCSS с Webpack.
Создаем простой лендинг пейдж
Наш лендинг будет довольно простой. В нем будет хедер, футер и контент. Область контента будет состоять из трех блоков, расположенных горизонтально. У каждого блока свое фоновое изображение. Текст внутри блоков центрирован. Конечный лендинг будет выглядеть так.
Загружаем проект с помощью Webpack
Начнем с создания проекта лендинга.
|
1 |
npm init |
Команда npm init создает файл package.json. Добавьте webpack и webpack-dev-server.
|
1 |
npm install webpack webpack-dev-server --save-dev |
Команда webpack-dev-server запускает веб-сервер, который откроет страницу index.html по адресу //localhost:8080. Разметка index.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PostCSS Demo</title> <script src="main.js"></script> </head> <body> <div class="header"> PostCSS Demo </div> <div class="row"> <div class="col-fast"> Fast </div> <div class="col-modular"> Modular </div> <div class="col-flexible"> Flexible </div> </div> <div class="footer"> PostCSS is awesome! </div> </body> </html> |
Для стилизации этой страницы будем использовать CSS, добавьте файл main.css со следующим кодом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
body { font-family: Monaco; width: 640px; margin: auto; } .header { padding: 20px; font-size: 1.5em; } .row { padding: 20px; } .footer { padding: 20px; font-size: 0.8em; text-align: right; } |
Webpack использует входной JS файл для запуска процесса создания. Добавьте файл index.js, он будет служить точкой входа для процесса создания.
|
1 |
require("./main.css"); |
Для настройки процесса создания Webpack использует файл webpack.config.js. Укажите следующие настройки.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
module.exports = { entry: './index.js', output: { filename: 'main.js' }, module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" } ] } } |
Модуль css-loader обрабатывает файл main.css, а модуль style-loader обрабатывает то, что получилось на выходе css-loader. Модуль style-loader вставляет готовый CSS код в тег head файла index.html. Установите оба загрузчика через npm.
|
1 |
npm install css-loader style-loader --save-dev |
После запуска webpack-dev-server наш лендинг можно посмотреть по адресу //localhost:8080. Скриншот нашей страницы.
Стилизуем страницу с помощью PostCSS
Sass и Less так популярны, потому что в них можно создавать переменные и использовать их в стилях несколько раз. Давайте добавим фоновый цвет хедера и футера.
|
1 2 3 4 5 6 7 8 9 |
$primaryBackColor: #0047AB; .header { background-color: $primaryBackColor; } .footer { background-color: $primaryBackColor; } |
Средней секции можно добавить рамку того же цвета $primaryBackColor.
|
1 2 3 |
.row { border: 2px solid $primaryBackColor; } |
Цвет текста хедера и футера можно занести в переменную $primaryTextColor.
|
1 2 3 4 5 6 7 8 9 |
$primaryTextColor: #FFF; .header { color: $primaryTextColor; } .footer { color: $primaryTextColor; } |
Чтобы CSS код выше заработал, в качестве Webpack модуля необходимо использовать postcss-loader, а также плагин postcss-simple-vars.
|
1 |
npm install postcss postcss-loader postcss-simple-vars --save-dev |
Webpack должен иметь следующие настройки PostCSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
module.exports = { entry: './index.js', output: { filename: 'main.js' }, module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" } ] }, postcss: function () { return [require('postcss-simple-vars')]; } } |
Запустим webpack-dev-server с этими настройками, теперь наш лендинг смотрится лучше.
Повторное использование стилей
Есть еще один очень полезный плагин postcss-simple-extend. Плагин задает плейсохлдеры для повторяющегося кода. У нас три блока в средней части имеют похожие CSS элементы. Отличаются только фоновые изображения. CSS код для одного блока будет следующий.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.col-fast { width:180px; height:360px; font-size: 30px; position: relative; float: left; display: flex; align-items: center; justify-content: center; margin: 8px; } .col-fast::before { content: ' '; background-image: url('images/fast.jpg'); display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.3; background-repeat: no-repeat; background-position: 50% 0; background-size: cover; } |
Чтобы не повторять код, можно воспользоваться postcss-simple-extend. Необходимо установить плагин postcss-simple-extend с Webpack модулем url-loader. Плагин url-loader будет обрабатывать фоновые изображения.
|
1 |
npm install postcss-simple-extend url-loader --save-dev |
Нужно внести правки в конфиг Webpack для PostCSS.
|
1 2 3 4 5 6 |
postcss: function () { return [ require('postcss-simple-vars'), require('postcss-simple-extend') ]; } |
В плагине postcss-simple-extend есть заданный плейсхолдер. Нам понадобится два плейсхолдера для блока (col) и для фонового изображения (col-before).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@define-placeholder col { width:180px; height:360px; font-size: 30px; position: relative; float: left; display: flex; align-items: center; justify-content: center; margin: 8px; } @define-placeholder col-before { content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.3; background-repeat: no-repeat; background-position: 50% 0; background-size: cover; } |
Плейсхолдеры можно вставлять в разных местах при помощи выражения @extend.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.col-fast { @extend col; } .col-fast::before { @extend col-before; background-image: url('images/fast.jpg'); } .col-modular { @extend col; } .col-modular::before { @extend col-before; background-image: url('images/modular.jpg'); } .col-flexible { @extend col; } .col-flexible::before { @extend col-before; background-image: url('images/flexible.jpg'); } |
Вложенные стили
У нас три блока, которые выстроены в один ряд при помощи левого обтекания. Если обтекание не сбросить, средняя часть лендинга схлопнется. Для сброса обтекания можно использовать псевдоэлемент :after.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.row { padding: 20px; border: 2px solid $primaryBackColor; background-color: $contentBackColor; &amp;::after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } } |
Чтобы использовать вложенные стили в CSS, добавьте плагин postcss-nested в конфигурацию webpack.
|
1 |
npm install postcss-nested --save-dev |
Плагин нужно добавить в конфиг webpack.
|
1 2 3 4 5 6 7 |
postcss: function () { return [ require('postcss-simple-vars'), require('postcss-nested'), require('postcss-simple-extend'), ]; } |
Стили блоков с обтеканием можно вложить.
|
1 2 3 4 5 6 7 8 |
.col-fast { @extend col; &amp;::before { @extend col-before; background-image: url('images/fast.jpg'); } } |
Заключение
У PostCSS нет своего синтаксиса, однако с его помощью в процесс создания можно подключать различные плагины. Все плагины поддерживают расширенный синтаксис CSS. Autoprefixer добавляет вендорные префиксы, postcss-simple-vars позволяет использовать правила повторно, postcss-simple-extend позволяет повторно использовать CSS блоки. С помощью плагина postcss-nested можно вкладывать стили. Экосистема PostCSS насчитывает около 200 плагинов, также довольно легко можно написать свой собственный. Для данного урока на github был создан специальный проект.
Автор: Vijay Thirugnanam
Источник: //www.codementor.io/
Редакция: Команда webformyself.
