Make a Publish Theme with SASS

Publish’s Foundation theme is a very nice starter, but at some point you will want to accommodate it to your needs. When you start touching the CSS you will quickly notice that the workflow is far from ideal.

Because the CSS file is part of the Resources folder it needs to be copied over to the Output every time you modify it. But not only that, you will also need to perform the difficult task of hitting refresh on the browser. This may seem trivial when the site generates in milliseconds, but the more complexity you add the slower is gonna get and breaking the flow of work is the worse that can happen.

Luckily you can use the simple technique of using SASS for your site. It will give you live reload but also open the gates to a more powerful (and sane) CSS.

Watch the video to get the full picture of the issue and how to solve it.

To make this work you will need to install SASS and make sure the library is accessible on your computer. Once you’ve done that the Publish SASS Plugin should work out of the box.

I recommend you that you use compressed: true when deploying your site so the CSS is minified. It you save you some bytes!

With the live reloading css, in combination with live reloading the HTML, we have a decent solution for our development workflow.

Make sure to checkout the Publish tag for more content about this static site generator.