Using Sass and Postcss in an ClojureScript project

mathiasp Saturday November 19, 2016

I'm a long time sass and compass user. And now I'm a ClojureScript user, too. So, how do I combine the two?

Is compass still relevant for my workflow?

When readjusting my environment; i first stopped and reconsidered my use of compass. What did I use it for? Do I still need it? It turned out, that I mostly used it for prefixing css and sprite generation. Since I start to use more and more svg icons, the sprite-generation part is becoming less important. And since postcss with autoprefixer gives me a very nice solution for adding prefixes, I think I can safely get rid of compass. Thanks a lot. We had a great time together! And using postcss I can choose from the myriad of available plugins, for example the excellent postcss-font-magigian.

BTW: why do I use sass and postcss? Well, I don't think improperly emulating some future spec is really not useful, at least not for me. For some thoughts on this, see for example Chris Coyier's article on CSS-Tricks, "The Trouble With Preprocessing Based on Future Specs".

So I decided to keep using sass, and use postcss strictly for postprocessing, i.e. autoprefixing, adding font declarations, minifying et al.

Searching for lein plugins

Since I'm using lein for my builds, it seemed a good idea to search for lein plugins. I found two: one basically used the sass command line, the other, sass4clj used libsass through jsass.

Sadly I couldn't use sass4clj since I run mostly on FreeBSD, and sass4clj didn't support this out-of-the-box. And lein-sass used the command line sassc, and really, I don't need no plugin for that.

CLI to the rescue

In the end, for me, it seemed the easiest was out to just run sass and postcss-cli on the command line. Both have inbuild watching capabilites, so I can just say

% sass --watch resources/scss/main.scss:resources/public/css/main.css

and have my scss files turned into css.

Now to the postcss side of things.

postcss-cli can be configured via a json config file. That looks pretty simple for my case:

    "input": "resources/public/css/main.css",
    "output": "resources/public/css/main.min.css",
    "use": ["autoprefixer", "postcss-font-magician"],
    "watch": true,
    "autoprefixer": {
        "browsers": "> 5%"

I still need to decide on a minifying workflow, but that should work quite similar.

Now I can start postcss like this:

% ./node_modules/.bin/postcss -c postcss.json

and have both tools work nicely together.

Reloading works with browser plugins, e.g. Auto-reload for Firefox.

So, no webpack, grunt, or gulp. This setup has plenty enough comfort for me, and having two additional shells open is not really that bad.