Postcss-evokit

Набор плагинов для postcss расширяющие возможности css:

• postcss-conditionals
• postcss-each
• postcss-math
• postcss-mixins
• postcss-nested
• postcss-variables

Before

$block-theme-enable: true;
$block-theme-default: black;
$block-theme-list: red, green, blue;
$block-element-padding: 2px;


.block {
  background-color: $block-theme-default;

  &__element {
    padding: resolve($block-element-padding * 3);
  }
}

@if $block-theme-enable {
  @each $value in ($block-theme-list) {
    .block_theme_$(value) {
      background-color: $value;
    }
  }
}

After

.block {
    background-color: black;
}

.block__element {
    padding: 6px;
}

.block_theme_red {
    background-color: red;
}

.block_theme_green {
    background-color: green;
}

.block_theme_blue {
    background-color: blue;
}