This article is about how easy it is to use Sass with the html5 boilerplate.

So you installed Sass, which, on Fedora, was as easy as

sudo yum install rubygem-sass

but you will find your way in Sass’s documentation.

Then you downloaded html5boilerplate (from initializr.com) and the ant buildscript. Unpack your html5 boilerplate into a folder and unpack the buildscript in the subdirectory „build“ so that your directory structure looks something like this:

.
|-- build
|-- css
|-- img
|-- index.html
|-- js
`-- robots.txt

now you edit the file „build/config/project.properties“ and uncomment the line „build.css.scss            = true“ (which was line 42 on my system) and you are done.

Now you can use Sass in your main.css wherever you want and the build script will compile it to valid css. Your browser does not understand Sass so you can no longer test your site without building it. You should use the basics buildtarget for ant to generate your css code for testing (and not optimizing images and such):

cd build
ant basics

You’ll find the compiled version in your „publish“ subfolder where you can look at your changes.