Стилізація лендингов з допомогою PostCSS

18

Від автора: у нас є Sass, LESS, Stylus, навіщо нам препроцесор PostCSS? У Sass є свій унікальний синтаксис, а у PostCSS немає особливих обмежень щодо написання стилів. Це більше інструмент трансформації CSS. Трансформації в PostCSS здійснюються з допомогою плагінів, написаних на PHP. Вхідний CSS конвертується в дерево, яке потім трансформується плагінами. Кінцевий етап полягає у зворотній конвертації дерева в CSS за допомогою PostCSS.

Повернемося до нашого питання: навіщо потрібен PostCSS? PostCSS швидше, має модульну структуру, і на відміну від існуючих препроцесорів, більш гнучкий.

Швидше Sass

На сторінці PostCSS на github є тести продуктивності. Нижче приведені результати тестів.

Стилізація лендингов з допомогою PostCSS

Чітко видно, 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.

Створюємо простий лендінгем пейдж

Наш лендінгем буде досить простою. У ньому буде хедер, футер і контент. Область контенту буде складатися з трьох блоків, розташованих горизонтально. У кожного блоку свого фонове зображення. Текст всередині блоків центрований. Кінцевий лендінгем буде виглядати так.

Стилізація лендингов з допомогою PostCSS

Завантажуємо проект з допомогою 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

Стилізуємо сторінку з допомогою 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

Повторне використання стилів

Є ще один дуже корисний плагін 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;
&::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;
&::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 був створений спеціальний проект.