Первый postcss плагин.

admin — Thu, 01 Jun 2017 14:01:24 +0000

В продолжение темы postcss. Если коротко, то я в восторге!
Второй день работы с postcss, и я уже пишу себе плагинчик, для перевода пикселей в EM’ы. Да, вы скажете, что уже есть такое, но дело в том, что в наследие от работы с SASS в стилях осталось много мест с вызовом SASS-функции em($font-size, $context). �? чтобы не менять пока, на время миграции, этот подход, набросал плагинчик, повторяющий подобное поведение.
Не хватает пока, разве что, указания точности в настройках (precision). Чтобы уменьшить количество знаков после запятой.

admin — Tue, 07 Jun 2016 08:13:29 +0000

В продолжение использования flexbox.
Поскольку в текущем проекте в качестве препроцессора мы используем SASS, то я для пущего удобства набросал миксин для генерации атрибутов со свойствами flexbox.
Выглядит это так. Сначала перечисляем в переменной нужные нам свойства:

$flex-properties: (
    justify-content: (flex-start flex-end center space-between space-around),
    align-items: (flex-start flex-end center baseline stretch),
    align-content: (flex-start flex-end center space-between space-around stretch)
);

Затем циклом перебираем все свойства:

@each $key, $properties in $flex-properties {
    @each $property in $properties {
        [#{$key}="#{$property}"] {
            #{$key}: #{$property};
        }
    }
}

�? получаем на выходе вот такой CSS:

[justify-content="flex-start"] {
  justify-content: flex-start; }

[justify-content="flex-end"] {
  justify-content: flex-end; }

[justify-content="center"] {
  justify-content: center; }

[justify-content="space-between"] {
  justify-content: space-between; }

[justify-content="space-around"] {
  justify-content: space-around; }

[align-items="flex-start"] {
  align-items: flex-start; }

[align-items="flex-end"] {
  align-items: flex-end; }

[align-items="center"] {
  align-items: center; }

[align-items="baseline"] {
  align-items: baseline; }

[align-items="stretch"] {
  align-items: stretch; }

[align-content="flex-start"] {
  align-content: flex-start; }

[align-content="flex-end"] {
  align-content: flex-end; }

[align-content="center"] {
  align-content: center; }

[align-content="space-between"] {
  align-content: space-between; }

[align-content="space-around"] {
  align-content: space-around; }

[align-content="stretch"] {
  align-content: stretch; }

Теперь остаётся правильно этим всем распорядиться, например так:

�? не большой готовый пример:

See the Pen PzPpgd by Sergey Kirichenko (@oknechirik) on CodePen.

SASS — CSS Guru

Первый postcss плагин.