PostCSS

Lately, I feel like everyone has been talking about PostCSS. Just as I started to get comfortable writing and working with SASS.

PostCSS processes CSS with JS plugins. On its own PostCSS doesn’t do a whole ton of stuff. It is all about the plugins. I didn’t set up a project. I just started playing on Codepen since they allow you to use PostCSS with a limited number of plugins.

The plugin echo system is rather large but I started only playing with a few. I started with the “for and “each” plugin. The “for” plugin allows for loop syntax in your CSS. The “each” so that you can iterate through values.

@use postcss-for;
@use postcss-each;
@for $i from 5 to 50 by 5 {
.b-$i { width: $(i)px; }
}

See the Pen PostCSS Playground by John Siwicki (@siwicki) on CodePen.

Obviously, I was just messing around with some syntax and didn’t really use PostCSS to build anything. The power of PostCSS is there and easy to see. I think for certain projects this is going to be something amazing to use. I like the plugin system for some projects because you can use only what you need. I think there will be a place in the tool chest for both SASS and PostCSS.

A few plugins worth saving. DoIuse - Lint CSS for browser support against caniuse database

Conditionals - Adds support for if-statements

StyleGuide - generate a style guide automatically