Blog Post • drupal

Getting SASSy with Drupal

June 30, 2012by Matthew Krick 6 min read
Blog Post • drupal
Getting SASSy with Drupal
Back to top

SASS, short for Syntactically Awesome Style Sheets, is a much more powerful way to write your css code. SASS allows you to set variables, inherit properties of other selectors, layout your code in an efficient manner and more.

.sass vs .scss

SASS comes in two flavors: .sass and .scss. The .scss format is just like regular css but lets you use all the new features included with SASS. The .sass format is similar to regular css but does away with the fancy brackets and semicolons. Here’s an example


#page-wrapper {
  padding: 20px;
#page-wrapper #group-left {
  background-color: #f00;
  color: #000;
#page-wrapper #group-right {
  background-color: #ff0;
  color: #fff;


  padding: 20px
    background-color: #f00
    color: #000
    background-color: #ff0
    color: #fff

No brackets. No semicolons. The .sass format is based on indentation. This allows you to layout and theme your stylesheets in a hierarchy. If you need to find a certain property it’s simple enough to drill down until you find it.

It’s also fast. Win.


SASS requires the use of a framework called Compass. If you have Ruby on Rails installed, it’s a snap to setup. Open a terminal window and enter:

gem install compass

That’s all. To incorporate it into your website, change directory to your theme folder and type:

compass init

This will create the following files:


Here’s what the meat of the config.rb file looks like:

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

It’s pretty straight-forward. If you want to keep your files in a different directory than the defaults, change it here. The drupal theme I work with keeps its files in a folder called css so I change the css_dir value to match that.

Converting older css
If you have any pre-existing stylesheets you want to keep using, you can rename them to .scss and drop them into the SASS folder. If they’re valid CSS3 stylesheets they’ll read just fine.

If you want to use the .sass format instead of .scss you can convert your code from .css or .scss to .sass by typing:

sass-convert filename.css filename.sass

Getting up and Running
Now we need to run compass. From the directory your config.rb is in, type:

compass watch

Any changes you make to your .scss or .sass files in your sass directory will automatically be converted into .css files in your css directory.

So what can SASS do?

SASS lets you define variables quickly and easily.


$red: #d92311
$funnyimage: url('../images/backgrounds/funny-cat-picture.jpg')
  border: solid 10px $red
  background-image: $funnyimage
  width: 200px
  height: 250px
  background-size: 100%


<div class = "box"></div>

SASS Variables
You can define colors, pixel width, even images.

Inheritance allows you to apply the style of one property to another. For example:


  border: solid 1px #00f
  color: #ddf
  padding: 30px
  background-color: #2C2C2C
  background-image: -moz-linear-gradient(top, #125E9A, #005580)
  background-image: -ms-linear-gradient(top, #125E9A, #005580)
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#125E9A), to(#005580))
  background-image: -webkit-linear-gradient(top, #125E9A, #005580)
  background-image: -o-linear-gradient(top, #125E9A, #005580)
  background-image: linear-gradient(top, #125E9A, #005580)
  -webkit-box-shadow: 0px 8px 8px -4px #333333
  -moz-box-shadow: 0px 8px 8px -4px #333333
  box-shadow: 0px 8px 8px -4px #333333
  @extend .blue-box
  @extend .dropshadow


<div class = "anotherbox">Hello World!</div>

SASS Inheritances
SASS allowed me to "extend" the properties of .blue-box and .dropshadow into the .anotherbox property. Very handy.

Mixins take the last two features, Variables and Inheritance, then smoosh them together to create something incredible. Mixins allow you to re-use previously written code and pass a variable through it.


$black: #1a1a1a
@mixin corners($radius)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  border-radius: $radius
@mixin shadow($x, $y, $blur, $radius, $color)
  -webkit-box-shadow: $x $y $blur $radius $color
  -moz-box-shadow: $x $y $blur $radius $color
  box-shadow: $x $y $blur $radius $color
  @include corners(10px)
  @include shadow(0px, 5px, 5px, 5px, $black)
  padding: 30px


<div class = "moreboxes">Hello World!</div>

SASS Mixins
Just like inheritance, I was able to include the properties of corners and shadow into .moreboxes but this time I was able to pass in variables! Note: When defining mixins you don't include a . or # before their name.

Sprite Sheets
Sass will even gather all your image files and create sprite sheets out of them!
Note: My images are located in images/socialmedia


@import "socialmedia/*.png"
  width: 50px
  height: 50px
  display: block
  margin: 10px
  @include socialmedia-sprite(facebook-50x50)
  @include socialmedia-sprite(youtube-50x50)
  @include socialmedia-sprite(rss-50x50)
  @include socialmedia-sprite(twitter-50x50)

The CSS that's generated looks like this:

.socialmedia-sprite, .facebook, .youtube, .rss, .twitter {
  background: url('../images/socialmedia-sf9e1afc5b0.png') no-repeat;
.socialmedia {
  width: 50px;
  height: 50px;
  display: block;
  margin: 10px;
.facebook {
  background-position: 0 -150px;
.youtube {
  background-position: 0 0;
.rss {
  background-position: 0 -100px;
.twitter {
  background-position: 0 -50px;


<a href = "" class = "socialmedia facebook"></a>
<a href = "" class = "socialmedia youtube"></a>
<a href = "" class = "socialmedia rss"></a>
<a href = "" class = "socialmedia twitter"></a>

SASS Spritesheets
This will save you a lot of Photoshop time!


SASS is pretty picky about syntax.


color: #ff0000

Not Valid

color:#ff0000 (missing a space after the colon)
color: #ff0000; (not valid in .sass format)

Fortunately, compass will give you an error message telling you what’s wrong and what line the problem is on for you to fix.

Tracking down properties
When compass converts your file into .css it also includes a commented area with the line # your code is being generated from. It looks like this:

/* line 27, ../sass/stylesheet.sass */

It adds an extra step in your bug hunting process but is easy enough to live with. Firefox users can get an add-on called FireSASS for Firebug which eliminates the problem.


As you can see, SASS is a powerful tool which can make your theming life a lot easier. Install it and give it a try!

Authored by