loading...

re: PostCSS Preset Env: Babel for CSS VIEW POST

FULL DISCUSSION
 

good article. I personally use a mix of different PostCSS plugins for Sass-like syntax with PreCSS

GitHub logo jonathantneal / precss

Use Sass-like markup in your CSS

PreCSS PostCSS Logo

NPM Version Build Status Support Chat

PreCSS lets you use Sass-like markup and staged CSS features in CSS.

$blue: #056ef0
$column: 200px
.menu {
  width: calc(4 * $column)
}

.menu_link {
  background: $blue;
  width: $column;
}

/* becomes */

.menu {
  width: calc(4 * 200px);
}

.menu_link {
  background: #056ef0;
  width: 200px;
}

PreCSS combines Sass-like syntactical sugar — like variables, conditionals, and iterators — with emerging CSS features — like logical and custom properties, media query ranges, and image sets.

Usage

Add PreCSS to your build tool:

npm install precss --save-dev

Node

Use PreCSS to process your CSS:

import precss from 'precss';

precss.process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use PreCSS as a plugin:

import postcss from '
 

Thank you very much. Yeah, I totally understand using Sass variables. I've been using postcss-simple-vars for Sass-like syntax until I've felt comfortable switching to CSS variables.

It's awesome how PostCSS can be flexible and offer different syntaxes, plugins, and flavors.

code of conduct - report abuse