Productively Distracted
Posted Wednesday April 27, 2011 around 1:32 AM

Sass is a ruby project intended to increase productivity when working with CSS style sheets. It is described by its home page:

Sass is a meta-language on top of CSS that's used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets. - Sass Homepage

While much could be said for and against Sass, my intention here is to give a demonstration of how sass can be implemented in a Django project. Sass can help improve productivity for authoring css by providing some nice features such as variables, mixins, nesting and functions (to name a few). Borrowing some examples from the sass tutorial.

This:

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}
Download

Compiles to this:

#navbar {
  width: 80%;
  height: 23px; }
  #navbar ul {
    list-style-type: none; }
  #navbar li {
    float: left; }
    #navbar li a {
      font-weight: bold; }
Download

And this:

$main-color: #ce4dd6;
$style: solid;

#navbar {
  border-bottom: {
    color: $main-color;
    style: $style;
  }
}

a {
  color: $main-color;
  &:hover { border-bottom: $style 1px; }
}
Download

Compiles to this:

#navbar {
  border-bottom-color: #ce4dd6;
  border-bottom-style: solid; }

a {
  color: #ce4dd6; }
  a:hover {
    border-bottom: solid 1px; }
Download

If you want to see more of what sass can do, go checkout the sass tutorial which has some nice side by side comparisons. Note: there are 2 sass dialects. Scss and sass. Scss, the newer and preferred syntax, feels more like css syntax with some added power. Sass is whitespace delimited and so feels more foreign coming from css. I prefer scss so all the examples here will use it.

Light Touch

When using sass with django, there is really nothing that needs to be integrated. There exists out there some projects to integrate sass into django (like django-sass). However I believe these to be unnecessary as they effectively add more dependencies without much benefit. At its core sass is used to compile css files. The generated css is clean and easy to edit without sass (though compiling would overwrite your changes), the worst case scenario is you decide you don't like it and just stop generating from sass and edit the css directly. This means there is very little risk adding sass to a project. Additionally you can use the included utility sass-convert to convert existing css files to sass.

Installing Sass

While the development process is simple, getting sass up and running requires a small bit of ruby ecosystem knowledge that most python/django programmers do not have.

To use sass you will need to install the following:

  1. ruby: Obviously needed to run ruby programs. Instructions
  2. rvm: The ruby equivalent of pythons virtualenv. Helps keep ruby versions and libraries from cluttering up your file system. Instructions
  3. rubygems: Package manager for ruby. Think of it as Pip for ruby. Instructions

I am not going to attempt instructions for installing all of these components on every environment. Their respective instructions do a fine job and deal with different operating systems etc. Just follow the instruction links.

With the above installed you are ready to setup sass itself to work with your project. I recommend running sass from its own rvm gemset for each django project. This will keep versions of sass isolated between projects and make life better down the road. To do this run the command:

$ rvm gemset create myproject
'myproject' gemset created (/Users/jwebb/.rvm/gems/ruby-1.9.2-p180@myproject).
Download

You now need to tell rvm to use the new gemset:

$ rvm gemset use myproject
Now using gemset 'myproject'
Download

It is now safe to install the sass gem:

$ gem install sass
Fetching: sass-3.1.1.gem (100%)
Successfully installed sass-3.1.1
1 gem installed
Installing ri documentation for sass-3.1.1...
Installing RDoc documentation for sass-3.1.1...
Download

Test that the install was a success by running the sass -v command.

$ sass -v
Sass 3.1.1 (Brainy Betty)
Download

If not go check the sass documentation or ask google to see what you (or I) did wrong.

Sass Basics

The process of using sass is:

  1. Create and edit a sass file.
  2. Compile the sass file to a css file.
  3. Rinse and repeat as needed.

Let's make a small example. Open a django project (you can download the sample project that I made from github) and create a new file called site.scss in your templates folder (or wherever you would like). In this file put the text:

$content_width: 500px;
$background: #FFFFFF;

.content {
  background-color: darken($background, 3%);
  width: $content_width;
}
Download

To compile this file to css open a terminal window, activate the gemset you created above, and in your projects root folder run the following command (adjust for your project path):

$ sass templates/site.scss:static/site.css
Download

You should now have a file named site.css in your static folder. Open it and you should see something like this:

.content {
  background-color: #f7f7f7;
  width: 500px; }
Download

That is all there is to it. Link your templates to the new css file(s) and you are set to go. There is nothing to integrate with django and nothing more than the css file that will need to be deployed to your production environment.

For more information about the power of sass look read the tutorial and documentation. You can also look at the sample file I made at github here for a longer example that uses nesting, variables and mixins.

Extra: Automating Sass Development

There are a couple things you can do to streamline your sass development experience.

sass --watch

Sass has a handy watch option that can be used to watch a file or even an entire directory. You use it like this:

$ sass --watch templates/:static/
>>> Sass is watching for changes. Press Ctrl-C to stop.
Download

This will run the sass compiler in watch mode so you can just save, and the changes will automatically be compiled to your css file.

You can save a little more typing by putting this command in a bash script. Mine is simple and looks like this:

#!/bin/bash
sass --watch templates/:static/
Download

rvmrc file

RVM has a great feature to setup a specific folder to use a certain ruby version and gemset. To do this you create a file named .rvmrc in your project root. Put the following in the file (adjusted for your environment/project):

rvm 1.9.2@myproject
Download

Now when you switch to your project folder from the console, the gemset with your projects sass version will automatically be activated. Very handy.

Conclusion

Sass is a powerful and handy abstraction on css that can increase your productivity. Using it with your django project (or any other web framework for that matter) is easy and lightweight, creating no new production dependencies. I am still pretty new to sass but so far I have been surprised at how pleasant it is to work with. I freely admit that my css skills are dirt poor. But using sass even I can get a decent looking design going in not much time. Give it a try and let me know how your experience with it goes.

blog comments powered by Disqus