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

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

От автора: у нас есть Sass, LESS, Stylus, зачем нам препроцессор PostCSS? У Sass есть свой уникальный синтаксис, а у PostCSS нет особых ограничений по написанию стилей. Это больше инструмент трансформации CSS. Трансформации в PostCSS осуществляются с помощью плагинов, написанных на JS. Входящий CSS конвертируется в дерево, которое потом трансформируется плагинами. Конечный этап заключается в обратной конвертации дерева в CSS при помощи PostCSS.

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

Быстрее Sass

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

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

Четко видно, PostCSS выигрывает у всех, он вдвое быстрее Sass.

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Модульная структура

Сила 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.

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее
<!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.5em;
}

.row {
  padding: 20px;
}

.footer {
  padding: 20px;
  font-size: 0.8em;
  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 был создан специальный проект.

Автор: Vijay Thirugnanam

Источник: https://www.codementor.io/

Редакция: Команда webformyself.

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree