From Sass to PostCSS
I have a feeling that my CSS authoring went way too far from vanilla CSS. Abstraction of my super functions heavy Sass files doesn’t even remind stylesheets as we remember them from the past. I noticed on Twitter a huge buzz about PostCSS but initially I refused to try it. I just couldn’t imagine a better process for working with styles than my sassy method. Excitement of community eventually triggered my curiosity and I gave it a try. Do you remember that feeling when you discovered power of Sass few years ago? I just moved back to CSS and have exactly the same feeling. Alan Mooiman gave an awesome talk at CascadiaFest 2015 conference titled “CSS is dead, long live CSS” and I am currently on the same boat.
The main difference between Sass and PostCSS
Sass comes with bunch of functionality irrespectively if you use a whole bunch of features, or just simple variables. PostCSS comes with absolutely nothing apart from API that handles plugins written in JavaScript. Yeah, thats correct! You pick extra functionality and add them to your process by yourself. If you need variables, you need to install small plugin and now you have a CSS with variables. If you need nesting on top of that, one more plugin and your CSS is now supercharged by variables and nesting. You get it now. Because you use only the things that you need it makes the entire process super fast.
PostCSS can do the same work as preprocessors like Sass, Less, and Stylus. But PostCSS is modular, 3-30 times faster, and much more powerful.
Grunt, Gulp, Broccoli…
There is many options to get your PostCSS running. Configurations is dead easy and it’s well described on Github. I use gulp.js as a build system and it works very well with it. If you struggle to set it up, “How to Build Your Own CSS Preprocessor With PostCSS” by Craig Buckler is a good resource to start with. Another very helpful resource to get your head around it is PostCSS Tutorials by Scott Tolinski from Level Up Tuts. Sometimes I can’t believe all the videos that this guy is doing are available to watch for free. I highly recommend a different series by Scott (ie. Gulp or Sketch are very good).
What I use
As I said earlier I try to restrict my toolkit to a minimum but it does’t mean I want to forget about amazing things like partials or variables. There is a few add-ons that I can’t live without and let me show you how it works. The majority of them work exactly the same as they do in Sass.
Partials and imports
I can’t imagine to work with CSS without meaningful order of my partials files. Plugin that I use to make it work is postcss-import. I kept the Sass naming convention with a single prefix underscore for partial files.
/* Code looks like */
@import '_typography.css';
Variables
Sass style variables you can add via postcss-simple-vars. Eventually I will replace it with cssnext that is using the syntax from latest CSS spec. It is cool to be familiar with upcoming standards, yeah?
/* Code looks like */
$color-brand: hotpink;
$font-size: 1em;
body {
color: $color-brand;
font-size: $font-size;
}
/* Result */
body {
color: hotpink;
font-size: 1em;
}
Nesting
I almost don’t nest at all. As a big fan of BEM methodology the only things that I nest are pseudo-classes and pseudo-elements. I could live without nesting, but it is just an affter-effect of longterm habits. The plugin that I use to do it is postcss-nested.
/* Code looks like */
a {
color: black;
&:hover {
color: plum;
}
}
/* Result */
a {
color: black;
}
a:hover {
color: plum;
}
Mixins
Sass mixins offers a huge power and I am worried that I won’t be able to replicate the same functionality in my new PostCSS workflow. Something that postcss-mixins brings to the table blew me away. Ability to define a mixin in CSS and function in JavaScript is awesome. I need to get my head around it a little bit more, but at first glance it’s superb!
/* Code looks like */
@define-mixin transition $property: all, $time: 150ms, $easing: ease-out {
transition: $(property) $(time) $(easing);
}
body {
@mixin transition color, 2s, ease-in;
}
/* Result */
body {
transition: color 2s ease-in;
}
Media-queries concatenation
Small plugin CSS MQPacker wraps the same media-queries rules into one. I know that few of the same media-queries decelerations doesn’t affect performance (as long as it is gzipped) but for peace of mind we can save few bits.
/* Code looks like */
.foo {
width: 100%;
@media (min-width: 960px) {
width: 50%;
}
}
.bar {
width: 100%;
@media (min-width: 960px) {
width: 50%;
}
}
/* Result */
.foo {
width: 100%;
}
.bar {
width: 100%;
}
@media (min-width: 960px) {
.foo {
width: 50%;
}
.bar {
width: 50%;
}
}
Autoprefixer
It is definitely the most popular add-on based on PostCSS. Autoprefixer cares about adding necessary vendor prefixes. For example:
/* Code looks like */
.box {
display: flex;
}
/* Result */
.box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
Smart minification with cssnano
I used many CSS minification tools but cssnano is much smarter than rest of them. This modular optimisation tool built on top of PostCSS generates as smaller production stylesheet as it can be. Have a look at the example from their website.
/* Code looks like */
h1::before,
h1:before {
margin: 10px 20px 10px 20px;
color: #ff0000;
-webkit-border-radius: 16px;
border-radius: 16px;
font-weight: normal;
font-weight: normal;
}
/* invalid placement */
@charset "utf-8";
/* Result */
@charset 'utf-8';h1:before{margin:10px 20px;color:red;border-radius:1pc;font-weight:400}
Will I move from Sass to PostCSS
Yes. Maybe not today, maybe not tomorrow, but eventually I’ll find a perfect workflow that will let me smoothly transfer entirely to PostCSS. This tool is getting popular day by day and I’m sure that it is not a temporary hype. Companies like Google, Twitter, Alibaba, and Shopify use it already. Recently Chris Coyier on CodePen’s blog announced support for PostCSS. New plugins are coming out. All these things just make me curious what will Sass 4.0 bring to us?
Let me know what do you think about PostCSS. If you have any plugins or hints that I could implement into my workflow, please let me know. I’m sure I will write more posts about PostCSS in near future, so please stay tuned!
Deleted comment
I'm glad you liked the post.
I love Sass same like you and I use it every single day. My only concern about Sass is the abstraction of my stylesheets that went too far. I think that PostCSS will help to simplify things a lot. Sass comes with huge power, but because feature exists it doesn't mean that we need to use it. PostCSS gives us ability to strip it down to bare minimum and I like it.
I'm curious about future development of Sass and PostCSS. PostCSS is better day by day, Sass every update gives us a tons of new features. CSS modules (separation rules from global scope) are another player that we need to pay attention for.
Will see Lasse, will see...
As a newb, I am interested in Sass, PostCSS, CSS (ala normal) and JS (of course). Since I'm new I'm always reading and I don't necessarily know what is being said or how it all fits in, but I find it interesting for sure. So I ask, what do you think of Web Components and how that will fit in with Sass and PostCSS?
I do not have a much experience with Web Components mate :( I'm just waiting for a project that I could finally start to play around with it. The only thing that I know now it that is a huge part of a future web.
Thanks for visiting my blog!
Great article, we're in the process of abandoning Sass. But, we're still working with Sass on large projects. Still, CSS is the future, not preprocessors, and we're trying to get to it as close as possible. I also agree that preprocessors went too far from actual CSS. We used PostCSS instead of libsass on our starter kits and we're pretty happy with it. Check it out http://www.baasic.com/pages...
Thanks for kudos.
Woho man! Your starter kit looks very nice, I will have a closer look late on definitely. I live it on a first glance!
Stay tuned because some more PostCSS related articles is coming shortly.
it's not hype, with postCSS and especially CSSNext you're using upcoming language features rather than made-up stuff like SASS or LESS (none of them is web standard and never will be) which means you're building transferable skills.
I totally agree @disqus_i4asi6yJqm:disqus. That's what I tried to say on this article, you probably read just an introduction :) Im huge fan of PostCSS and all my new project are based on it, including amazing CSS Next. Enough of Sass / LESS abstraction!
There is a minimalist indent based sugar syntax plugin for PostCSS. https://github.com/postcss/...
https://uploads.disquscdn.c...
SASS is great, and I don't see how post-css is needed replacement, and as of now I personally share your "Yes. Maybe not today, maybe not tomorrow, but eventually".
Right now, SASS or LESS provides you right out of the box with everything you might need to do any type of project. Speed problems? Use libsass, it's written in C.
Now, what I do like about PostCSS is the fact that provides us with modularity and granularity. What this does is provide the developer with an elevated level of customization that's starting to be of use. E.G. Say you are building an exp. site that works on both dev versions of Chrome and Firefox... Then you go ahead and build your css with native css variables!
Which reminds me how happy I was when I found Babel, not just for the fact that I get to write ES6 every day now, that's not even the point, but rather that I get to ditch say jQuery promises in favour of the future Promises/A+ impl, as it up to the dev to decide what goes into your polyfilling and how it does it.
Lastly, let us not forget that a huge number of improvements into existing web languages went thru thanks to pre-processors and supersets. CoffeeScript arrows inspired ES6 arrows, LESS variables CSS ones... IMHO we should stop calling things "hype", and name them "this idea isn't new, but it's worth reading in order to stir your thoughts a bit".
Great article! May I ask what stops you from switching from Sass to PostCss today? What advantages Sass still have?
Thanks! I'm glad you liked it. Today, the only thing that prevents me are only people who I work with. For all my personal projects I completely switched to PostCSS. Really amazing thing to work with!
Thank you :)
Past a month I have read over a dozen articles explaining Post CSS, all of them were about explaining how to use it, but after reading this I totally got the actual concept of how it work. Thanks a ton man.
I'm extremely glad that you found it helpful Sandip. Enjoy PostCSS'ing :-)
Do you still use mixins?
Hi.
As akwarystyka in out industry - it dependent. But to jeep it simple - I do on Sass not with Post CSS. Mixins arę amazing but I can live without them. On js projects i takie na advantage od Js to do crazy stuff about styling. In tiny projects Im oldschool and I use good old css in a single file.
Every project is a different story :)
Grunt, Gulp, Broccoli…
So where is the Webpack?😂
It would be pretty hard to list them all 😉
The current problem with postcss is vscode... There is not satisfatory support in vscode for postcss or at least one that combines full intellisense and highlighting... Which is a bummer...
Keep in mind that I published this article 7 years ago. Ps. I still use Sass and I love it a lot!