PostCSS знакомство

Познакомился и изучил LESS потом перешёл на SASS на котором работаю до сих пор, но пришло время переходить на PostCSS, подробно шаг за шагом распишу как начать пользоваться, и почему

Что такое PostCSS

В отличии от препроцессоров SASS и LESS, PostCSS - это библиотека больше чем постпроцессор, написанная на JavaScript, которая на входе получает CSS, файл обрабатывается и на выходе сохраняется как css.

Как работает

Есть сам фреймворк PostCSS, который разбирает (парсит) код ваших стилей и записывает в переменные все свойства, имена, селекторы. После вы подключаете нужные вам плагины, плагины в свою очередь работают с данными переменных. После выполнения всех плагинов генерируется CSS исходя из обработанных переменных, свойств, имён.

Преимущества

  • Работает быстрее, в зависимости от количества плагинов
  • Модульность ( подключение плагинов )
  • Разнообразие синтаксиса
  • Гибкость - возможность использовать только то что нужно
  • Удобность
  • Экономия времени
  • Краткость кода
  • Свободный выбор функционала из огромного количества плагинов
  • Функции, невозможные на Less и Sass
  • Простое API для написания собственного плагина
  • и множество других преимуществ

Обзор плагинов

Рассмотрим функционал некоторых популярных плагинов, а так-же их возможности.

Плагин «Autoprefixer»

Добавляет префиксы к правилам CSS, для совместимости с старыми браузерами.

.upost-class {
    display: flex;
    user-select: none;
}
.upost-class {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-user-select: none;
     -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

Плагин «CSSnext»

Возможность использовать синтаксис CSS4 уже прямо сейчас.

@custom-selector :--up h1, h2;
:root {
--color: blue;
}
:--up {
    background: var(--color);
}
h1, h2 {
    background: blue;
}

Плагин «CSSnano»

Возможность сократить и сжать код.

/* комментарий */
.test    {
    width: 28px;
}

.upost-class {
    font-size: 16px ;
}
.test{width:28px}.upost-class{font-size:16px}

Плагин «Modules»

Возможность генерировать рандомные имена классам.

.test {
    background: black;
}
.upost-class {
    color:#fff;
}
._test_1txxq_1 {
    background: black;
}
._upost-class_1txxq_11 {
    color:#fff;
}

Плагин «Px-to-em»

Высчитывает и заменяет все px на em

.test {
    width: 28px;
}
.upost-class {
    font-size: 16px;
}
.test {
    width: 1.75em;
}
.upost-class {
    font-size: 1em;
}

Заключение

Благодаря своей модульности и скорости PostCSS является самым удобным процессором над вашим CSS.

Мы рассмотрели лишь несколько из множества плагинов, которых на самом деле сейчас очень много из-за своего очень простого API, благодаря которому вы и сами можете написать собственный плагин для вашего проекта.

Продолжение о PostCSS следует :)

Продолжение

Комментарии - 0
для добавления комментария
пожалуйста войдите или зарегистрируйтесь
Хостинг от uCoz