НовостиАдминистрированиеУправления хостингомАрхив
15 октября 2015

Краткое руководство по PostCSS: Варианты быстрой настройки

Добро пожаловать в Глубокое погружение в PostCSS: Краткое руководство. В первых статьях нашей серии мы рассмотрим, как начать работать с PostCSS наиболее быстрым и эффективным способом.

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

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

PostCSS и CodePen

Если вы новичок в мире PostCSS, самым быстрым способом начать его использовать будет CodePen.Сегодня в CodePen есть встроенная поддержка PostCSS, а также следующие плагины и пакеты:

  • cssnext
    • postcss-simple-vars
    • postcss-discard-comments
    • postcss-custom-media
    • postcss-media-minmax
    • postcss-conditionals
    • postcss-each
    • postcss-for
    • postcss-nested
    • postcss-transform-shortcut

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

Для начала зайдите на CodePen и создайте новый pen. После этого нажмите на небольшой значок шестеренки в верхнем левом углу окна CSS и вызовите панель настроек.

В выпадающем меню под названием CSS Preprocessor выберите вариант PostCSS. Также вы можете отметить переключатель под названием Autoprefixer, чтобы включить этот плагин.

2.1.png

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

2.2.png

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

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

@use cssnext;

Благодаря этой строке теперь у вас есть возможность использовать весь функционал CSSnext. Мы хотим воспользоваться функциями переменной и цвета CSS, чтобы настроить цвет фона тела текста. Для начала, настроим раздел :root и определим в нем переменную CSS. Добавьте в свою панель CSS следующее: 

:root {
  --body_bg_color: black;
}

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

body {
  background: var(--body_bg_color);
}

На данном этапе фон вашего pen а должен стать черным. Также можно нажать на кнопку View Compiled в верхней части вашей панели CSS, чтобы увидеть сгенерированный код:

2.3.png

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

В строке, определяющей переменную --body_bg_color, измените значение black на: 

--body_bg_color: color(black lightness(20%));
2.4.png

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

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

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

Вот этодемо (визуально ничем не примечательное) мы только что создали.

PostCSS и Prepros

Prepros может не поддерживать такое разнообразие плагинов, как CodePen, но он включает эффективную активацию Autoprefixer и cssnext. Prepros можно скачать здесь.

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

2.5.png

Теперь вы можете использовать все функциональные возможности пакета плагинов cssnext, а также автоматически расставлять префиксы в своем CSS.

Давайте повторим

  • Чтобы начать работать с PostCSS, попробуйте сделать быструю настройку через CodePen или Prepros;
    • CodePen предлагает десять доступных плагинов/пакетов;
    • Активируйте PostCSS в настройках CSS CodePen, после этого воспользуйтесь правилами @, чтобы включить определенные плагины;
    • Prepros предлагает плагин Autoprefixer и пакет cssnext;
    • Активируйте их в настройках для любого CSS-файла в проекте Prepros.

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

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

О том, как это сделать, вы узнаете в следующих двух уроках, Краткое руководство: Настройка Gulp и Краткое руководство: Настройка Grunt .

По материалам webdesign.tutsplus.com

Читайте также