PostCSS Быстрый старт: Установка

Russian (Pусский) translation by Igor Lavrinovich (you can also view the original English article)

Добро пожаловать в "PostCSS полное погружение: Руководство по быстрому старту". В первых статьях серии мы рассмотрим как начать работу с PostCSS самым быстрым и эффективным способом из всех возможных

В этом уроке мы начнем с быстрой настройки, так чтобы вы смогли начать работать с PostCSS через несколько минут. В настоящее время есть два варианта быстрого старта CodePen и Prepros.

Давайте посмотрим, как их использовать, чтобы поиграть с PostCSS прямо сейчас.

PostCSS в CodePen

Если вы совсем новичок в PostCSS. CodePen - самый быстрый способ начать изучение.

CodePen встроили PostCSS в свою виртуальную среду, а также добавили поддержку следующих плагинов и пакетов:

Этот набор плагинов дает вам поддержку "синтаксиса будущего", функций Sass, удаления комментариев и использования шорткатов и сокращений.

Перейдите на сервис CodePen и и нажмите "+ New Pen". Затем нажмите на значок шестеренки в верхней левой части панели CSS, чтобы открыть настройки.

Из раскрывающегося списка CSS Preprocessor выберите параметр PostCSS. Также проверьте включен ли плагин Autoprefixer.

После этого, вы уведите черную кнопку чуть выше списка с надписью "Need an add-on?". Нажатие на эту кнопку, откроет список @ правил (Список доступных плагинов для PostCSS). Чтобы начать использовать соответствующий плагин PostCSS, нажмите Add, чтобы добавить импорт в начало CSS кода, либо скопируйте и вставьте любой из этих @ правил в начало CSS

Пример использования CodePen

Давайте рассмотрим пример того, как мы могли бы использовать доступные плагины PostCSS с CodePen, начиная с пакета cssnext.

В панели CSS добавьте этот код, чтобы указать, что вы хотите использовать cssnext:

1	@use cssnext;

Теперь нам доступны все функции cssnext, описанные здесь - http://cssnext.io/features. Мы используем функции CSS variable и color для того чтобы задать цвет фона для body.

Во-первых, установим :root раздел и определим в нем CSS переменную . Добавьте на панель CSS:

1	:root {
2	--body_bg_color: black;
3	}

Теперь мы можем использовать эту переменную в нашем CSS, добавив код ниже:

1	body {
2	background: var(--body_bg_color);
3	}

Фон нижней панели должен измениться на черный. Вы можете нажать кнопку View Compiled в правом верхнем углу панели CSS, чтобы увидеть обычный CSS код, который был сгенерирован:

“View Compiled” показывает код после обработки PostCSS

Теперь предположим, что мы не считаем, темно-черный подходящим для дизайна и хотим, немного его осветилить. Для настройки цвета, мы можем использовать "синтаксис будущего", который позволяет изменять цвета.

В строке, где мы объявляем переменную - body_bg_color, измените значение black на:

1	--body_bg_color: color(black lightness(20%));

Эта функция делает наш черный цвет на 20% светлее. Теперь цвет фона нижней панели должен стать светло-серым

Любой из поддерживаемых плагинов можно использовать на CodePen точно так же:

Добавьте @ правило для плагина, который вы хотите использовать
Начните использовать плагин в вашем CSS коде в соответствии с его инструкциями, (ссылки выше)

Вот демо (не примечательное), которое мы только что создали:

PostCSS в Prepros

Prepros не имеет такого разнообразия плагинов, как CodePen, но Autoprefixer и cssnext вшиты по умолчанию. Prepros можно загрузить с https://prepros.io.

Чтобы начать работу, перетащите проект, который содержит CSS-файлы в интерфейс. Затем нажмите на имя CSS-файла, чтобы открыть панель параметров справа. В этой панели проверьте отмечены ли чекбоксы AutoPrefix CSS для работы Autoprefixer и Cssnext для работы cssnext:

Теперь вы сможете использовать все функциональные возможности cssnext и autoprefixed.

Подведем итоги

Ладно, давайте быстро подытожим то, все что прочитали в этой статье:

Чтобы попробовать PostCSS, используйте CodePen или Prepros для быстрого старта
CodePen предлагает 10 плагинов/пакетов, которые можно использовать
PostCSS в CodePen активируется в настройках панели CSS, подключается с помощью @ правила для включения конкретных плагинов
Prepros предлагает только Autoprefixer плагин и cssnext pack
Они активируются в настройках любого CSS-файла в проекте Prepros

Далее: Интеграция Task Runner (Сборщик проектов)

CodePen и Prepros это отличный способ быстро познакомиться с возможностями PostCSS. Однако у них есть недостаток. Вы можете использовать только те плагины, которые предоставлены изначально.

Когда вы будете готовы познать всю мощь PostCSS, вы захотите выбрать и настроить свой собственный набор плагинов. Вероятно самый удобный способ сделать это путем создания пользовательских PostCSS проектов с помощью сборщиков проектов, таких как Gulp или Grunt.

Вы узнаете, как это просто в следующих уроках, «Краткое руководство: Gulp установки» и «Краткое руководство руководство: Grunt установки».