Від автора: у нас є Sass, LESS, Stylus, навіщо нам препроцесор PostCSS? У Sass є свій унікальний синтаксис, а у PostCSS немає особливих обмежень щодо написання стилів. Це більше інструмент трансформації CSS. Трансформації в PostCSS здійснюються з допомогою плагінів, написаних на PHP. Вхідний 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.
npm install -g postcss-cli
PostCSS трансформує CSS за допомогою плагінів. Autoprefixer – популярний плагін, який додає вендорные префікси в CSS правила. Код нижче необхідно додати вендорные префікси.
p {
display: flex
}
Встановіть Autoprefixer через NPM.
npm install -g autoprefixer
Для запуску PostCSS потрібно прописати наступні параметри.
—use задає плагін.
—output задає вихідний файл.
postcss –use autoprefixer –output output.css input.css
У вихідному CSS прописані всі вендорные префікси.
p {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
Тепер перейдемо до нашого проекту. Серед популярних конструкторів можна виділити Webpack, Gulp і Grunt. У цьому уроці ми будемо вчитися використовувати PostCSS з Webpack.
Створюємо простий лендінгем пейдж
Наш лендінгем буде досить простою. У ньому буде хедер, футер і контент. Область контенту буде складатися з трьох блоків, розташованих горизонтально. У кожного блоку свого фонове зображення. Текст всередині блоків центрований. Кінцевий лендінгем буде виглядати так.
Завантажуємо проект з допомогою Webpack
Почнемо з створення проекту лендинга.
npm init
Команда npm init створює файл package.json. Додайте webpack і webpack-dev-server.
npm install webpack webpack-dev-server –save-dev
Команда webpack-dev-server запускає веб-сервер, який відкриє сторінку index.html за адресою http://localhost:8080. Розмітка index.html.
<!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 з наступним кодом.
body {
font-family: Monaco;
width: 640px;
margin: auto;
}
.header {
padding: 20px;
font-size: 1.5 em;
}
.row {
padding: 20px;
}
.footer {
padding: 20px;
font-size: 0.8 em;
text-align: right;
}
Webpack використовує вхідний JS файл для запуску процесу створення. Додайте файл index.js він буде служити точкою входу для процесу створення.
require(“./main.css”);
Для налаштування процесу створення Webpack використовує файл webpack.config.js. Вкажіть наступні параметри.
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.
npm install css-loader style-loader –save-dev
Після запуску webpack-dev-server наш лендінгем можна подивитися за адресою http://localhost:8080. Скріншот нашої сторінки.
Стилізуємо сторінку з допомогою PostCSS
Sass і Less так популярні, тому що в них можна створювати змінні і використовувати їх в стилях кілька разів. Давайте додамо фоновий колір хедера і футера.
$primaryBackColor: #0047AB;
.header {
background-color: $primaryBackColor;
}
.footer {
background-color: $primaryBackColor;
}
Середній секції можна додати рамку того ж кольору $primaryBackColor.
.row {
border: 2px solid $primaryBackColor;
}
Колір тексту хедера і футера можна занести в змінну $primaryTextColor.
$primaryTextColor: #FFF;
.header {
color: $primaryTextColor;
}
.footer {
color: $primaryTextColor;
}
Щоб CSS код вище заробив, як Webpack модуля необхідно використовувати postcss-loader, а також плагін postcss-simple-vars.
npm install postcss postcss-loader postcss-simple-vars –save-dev
Webpack повинен мати наступні параметри PostCSS.
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 код для одного блоку буде наступний.
.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 буде обробляти фонові зображення.
npm install postcss-simple-extend url-loader –save-dev
Потрібно внести правки в конфіг Webpack для PostCSS.
postcss: function () {
return [
require(‘postcss-simple-vars’),
require(‘postcss-simple-extend’)
];
}
В плагіні postcss-simple-extend є заданий плейсхолдер. Нам знадобиться два плейсхолдера для блоку (col) і для фонового зображення (col-before).
@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.
.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.
.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.
npm install postcss-nested –save-dev
Плагін потрібно додати в конфіг webpack.
postcss: function () {
return [
require(‘postcss-simple-vars’),
require(‘postcss-nested’),
require(‘postcss-simple-extend’),
];
}
Стилі блоків з обтіканням можна вкласти.
.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 був створений спеціальний проект.
