Up and running with Sass in Drupal 7

What is Sass?

Sass is a new approach to writing CSS. It holds some great features which allow you to write your code in less time with more flexibility and readability.

Installing Sass

Before you get started, ensure you have RubyGems installed.

To install sass, simply fire up Terminal and run the following command:

sudo gem install sass

That's all there is too it. You're now ready to start compiling Sass.

Compiling Sass

Sass is pre-processed CSS, meaning that it must be compiled into regular CSS in order for browsers to render it. To do this is quite simple.

In Terminal, navigate to your theme folder.

cd sites/all/themes/my_theme/

Inside your theme folder, it is a best practice to have one folder for your scss files and another folder for your compiled css files.

From your theme folder we need to ask the Sass program to watch a particular folder for changes to .scss files and where to compile them.

sass --watch sass:css

Sass is now watching for changes to any .scss within the sass folder. Each time you edit and save a particular .scss file, it will be recompiled.

There are two important parameters to the --watch option. The first option is the name of the folder (in this case, sass) that holds our .scss files. The second option (css) is the name of the folder where our .scss will get compiled into regular CSS.

However, these two parameters do not need to be folders. It can be as simple as explicitly typing the file name. For example:

sass --watch style.scss:style.css

You've now successfully compiled your first .scss file.

Sass Syntax

Normally when writing CSS, it would be similar to the following:

#content h1 {
  font-size: 1.5em;
  color: #FF0000;
}

#content p {
  margin-bottom: 1em;
  line-height: 1.5em;
}

The biggest problem with regular CSS is that you will often find yourself repeating the same selectors each time. This is where Sass is great.

In Sass, you can nest selectors within selectors. This instantly improves readability and makes much more sense.

#content {
  h1 {
    font-size: 1.5em;
    color: #FF0000;
  }
  p {
    margin-bottom: 1em;
    line-height: 1.5em;
  }
}

Sass Variables

One of the most powerful features of Sass is the use of variables.

$link_color: #FF0000;
#content a { color: $link_color; }

This would compile to:

#content a { color: #FF0000; }

This is probably one of the most useful features in a Drupal theme, where a standard colour pallette is re-used throughout the CSS. You can define this once in Sass, and then apply to a number of selectors. If you want to tweak a colour, you only need to change it in one place and it will be updated everywhere. Bam!

Sass Mixins

Another great feature in Sass is the ability to reuse large chunks of code, known as "mixins".

@mixin rounded_corners($radius) {
  border-radius:  $radius;
  -moz-border-radius:  $radius;
  -webkit-border-radius:  $radius;
}

Then to use the mixin, we simply do the following

#content {
  .box {
    @include rounded_corners(10px);
  }
}

This would compile to:

#content .box {
  border-radius:  10px;
  -moz-border-radius:  10px;
  -webkit-border-radius:  10px;
}

Mixins are a great way to keep your code clean, modular and reusable. This can be useful in handling the myriad varieties of HTML markup that different core and contrib modules output, when they are essentially trying to achieve the same goal (e.g rendering a block). Interestingly, this is something being addressed by the Twig initiative in Drupal 8.

Importing Sass files (base partials)

Last but not least, a great little feature of Sass is the ability to import other Sass files without rendering their output in your main file, these are called base partials.

@import _base.scss

This feature is a nice way of keeping extraneous style outside of your main stylesheets. For example, you would keep your variables and mixins in the _base.scss file and import that into your main layout sass file. The use of the underscore in the filename prevents the file's output from being rendered in your main CSS file. The SMACSS book is a great read on how to keep your CSS modular.

Conclusion

I hope you now understand the basics of this powerful language. There is still so much more to learn, but hopefully this short tutorial has given you the basics to start using SASS in your next project.

Links

Sass documentation