SASS

I have recently discovered SASS, Syntactically Awesome Style Sheets, which presents a new way to write stylesheets in a more reusable and DRY fashion. SASS using a syntax closely related to Python and Ruby which uses indentation instead of the normal "{" and "}" that you would see in CSS. It turns out that while this may seem like a great idea to a Python developer, it is actually not seen as a great way to write your stylesheets as it doesn't look like CSS and someone without SASS experience wouldn't understand what was going on. Enter SCSS, also known as Sassy CSS. SCSS is SASS that looks a lot more like css, in fact if you didn't look closely enough you would think it was! CSS is perfectly valid SCSS, so anyone who knows CSS can actually write SCSS. However, there are a lot of helpful things that you can do with SCSS to make your life as a developer much easier.

The most basic feature of SASS and SCSS, which I will now be referring to as just SASS, is the ability to nest selectors. The easiest way to explain this is by an example, this is the original CSS:

ul {
    list-style:none;
}

ul li {
    font-weight:bold;
}

ul li span {
    font-size:2em;
}

Here is the equivalent SASS:

ul {
    list-style:none;
    li {
        font-weight:bold;
        span {
            font-size:2em;
        }
    }
}

As is illustrated in this very simple example, this allows you to group selectors acting on nested elements: in the same place and in a nested fashion. This saves space and makes it easier to find where styles are in your stylesheets. There is way more that you can do with SASS including defining variables:

$background_color:#DDD;

body {
    background:$background_color;
}

And creating mixins, which are sort of like functions:

@mixin add_padding($amount) {
    padding:$amount*2 $amount 0 $amount*1.5;
}

p {
    @include add_padding(5px);
}

There is even more powerful stuff that can be done with SASS, and you are encouraged to check it out at sass-lang.com.

Integration with Django

SASS can be easily included into your Django project by using Django Compressor. Firstly, you must install SASS, which requires Ruby, by using the command:

gem install SASS

Next, you must follow the steps to get Django Compressor up and running. Finally, you must add the following pre-compiler to your projects settings file:

COMPRESS_PRECOMPILERS = (
    ('text/scss', 'sass --scss {infile} {outfile}'),
)

Now you are ready to use SASS in your project! just include the compress template tag around your stylesheet links:

{% load compress %}
{% load staticfiles %}

{% compress css %}
    <link rel="stylesheet" type="text/scss" href="{% static 'styles.scss' %}" />
{% endcompress %}

And your SASS will be compiled into CSS on the fly!

Using Compass

Compass is a SASS library that includes blueprints and mixins that make writing stylesheets with SASS even easier. The Compass docs explain all of the mixins that are included and some examples of how you can use them. Integrating Compass with your SASS requires a little bit of extra work when using Django Compressor. Firstly, make sure you install compass with the following command:

gem install compass

Next, you will need to make sure that if you have previously installed SASS, you delete it and use the version that comes with Compass. Compass doesn't always play nicely with the newest version of SASS, so it is important that you take this step. All you have to do from here is modify your COMPRESS_PRECOMPILERS in your project settings. Replace the previous pre-compiler with the following:

('text/scss', 'sass --scss --compass {infile} {outfile}')

That's it, you are now ready to use SASS with the added power of Compass in your Django project!