Стилизация лендингов с помощью 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.

PostCSS трансформирует CSS при помощи плагинов. Autoprefixer – популярный плагин, добавляющий вендорные префиксы в CSS правила. В код ниже необходимо добавить вендорные префиксы.

Установите Autoprefixer через NPM.

Для запуска PostCSS нужно прописать следующие параметры.

—use задает плагин.

—output задает выходной файл.

В выходном CSS прописаны все вендорные префиксы.

Теперь перейдем к нашему проекту. Среди популярных конструкторов можно выделить Webpack, Gulp и Grunt. В этом уроке мы будем учиться использовать PostCSS с Webpack.

Создаем простой лендинг пейдж

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

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

Загружаем проект с помощью Webpack

Начнем с создания проекта лендинга.

Команда npm init создает файл package.json. Добавьте webpack и webpack-dev-server.

Команда webpack-dev-server запускает веб-сервер, который откроет страницу index.html по адресу http://localhost:8080. Разметка index.html.

Для стилизации этой страницы будем использовать CSS, добавьте файл main.css со следующим кодом.

Webpack использует входной JS файл для запуска процесса создания. Добавьте файл index.js, он будет служить точкой входа для процесса создания.

Для настройки процесса создания Webpack использует файл webpack.config.js. Укажите следующие настройки.

Модуль css-loader обрабатывает файл main.css, а модуль style-loader обрабатывает то, что получилось на выходе css-loader. Модуль style-loader вставляет готовый CSS код в тег head файла index.html. Установите оба загрузчика через npm.

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

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

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

После запуска webpack-dev-server наш лендинг можно посмотреть по адресу http://localhost:8080. Скриншот нашей страницы.

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

Стилизуем страницу с помощью PostCSS

Sass и Less так популярны, потому что в них можно создавать переменные и использовать их в стилях несколько раз. Давайте добавим фоновый цвет хедера и футера.

Средней секции можно добавить рамку того же цвета $primaryBackColor.

Цвет текста хедера и футера можно занести в переменную $primaryTextColor.

Чтобы CSS код выше заработал, в качестве Webpack модуля необходимо использовать postcss-loader, а также плагин postcss-simple-vars.

Webpack должен иметь следующие настройки PostCSS.

Запустим webpack-dev-server с этими настройками, теперь наш лендинг смотрится лучше.

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

Повторное использование стилей

Есть еще один очень полезный плагин postcss-simple-extend. Плагин задает плейсохлдеры для повторяющегося кода. У нас три блока в средней части имеют похожие CSS элементы. Отличаются только фоновые изображения. CSS код для одного блока будет следующий.

Чтобы не повторять код, можно воспользоваться postcss-simple-extend. Необходимо установить плагин postcss-simple-extend с Webpack модулем url-loader. Плагин url-loader будет обрабатывать фоновые изображения.

Нужно внести правки в конфиг Webpack для PostCSS.

В плагине postcss-simple-extend есть заданный плейсхолдер. Нам понадобится два плейсхолдера для блока (col) и для фонового изображения (col-before).

Плейсхолдеры можно вставлять в разных местах при помощи выражения @extend.

Вложенные стили

У нас три блока, которые выстроены в один ряд при помощи левого обтекания. Если обтекание не сбросить, средняя часть лендинга схлопнется. Для сброса обтекания можно использовать псевдоэлемент :after.

Чтобы использовать вложенные стили в CSS, добавьте плагин postcss-nested в конфигурацию webpack.

Плагин нужно добавить в конфиг webpack.

Стили блоков с обтеканием можно вложить.

Заключение

У 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 недели

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

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

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

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree