Why I use Syntactically Awesome Stylesheets(SASS)

I’m working on a project site right now and as usual I am using SASS to do all of my CSS and I was thinking about changing the color scheme on the project. Most of the elements can be easily changed around with CSS, there aren’t very many images controlling style on the site.

I then proceeded to think about the days when SASS didn’t exist and how annoying this would be.  Really? Change every font color and every background color until it matches up to the new theme I had in mind? Wow, that would be horribly annoying and a mess to deal with.

Variables

For those not familiar with SASS you can define variables within your stylesheets which become incredibly valuable(hehe no pun intended).  The variables can hold anything you need in a stylesheet, items such as hex codes, numbers for pixel amounts or a string containing pixel amounts, anything you would repeat basically.  You can even add or subtract the amounts in the variables, hex codes and pixel amounts, amazing. So when it comes to changing the theme for this project that I’m working on it’s just a matter of changing the first 4+ lines of code on my site to the new color scheme I have in mind.

!normal_red = #ff0000
!pretty_gold= #ffcc00
!light_blue = #99ddff
!modern_grey = #ccc
!boring_grey= #777
!normal_padding= 10px
!site_width= 950px

body
  :background= !light_blue
  #wrapper
    :width 950px
    :margin 0px auto
    :padding= !normal_padding
    #header
      :border= 1px solid !pretty_gold
      :padding= !normal_padding + 5px

I hope you can see the value in that chunk above, for documentation on the syntax check out the SASS site, it’s explained very well over there, no need for duplication.

Nesting

If you notice in the above code you are able to nest your classes and id’s within sass. This is much nicer than typing out a long declaration for a class such as

#wrapper #content #inner .left .first {
color: #999;
}

In SASS nesting is usable at each level, meaning that you can define styles at each level that you nest your classes or elements. The styles are only used for the level of nesting that you are at, children don’t inherit from parents basically.

#wrapper
  :background #ccc
   #content
    :border 1px solid #ccc
    #inner
      :font-size 12px
    .left
      .first
        :color #999

Mixins

Mixins are reused chunks of code in CSS. For instance if you have some common ‘clear’ code that you need to apply to multiple elements you can define a mixin and name it and then apply that to any class, element or ID within your sass stylesheet. With mixins you can even pass in arguments for the most commonly used pieces.

=left(!how_much)
  float: left
  margin-right = !how_much

#intro
  +left(20px)

The intro ID is now floating left and has a margin-right of 20px since we passed that in as the argument.

For most ruby developers this may be obvious but I got into an argument with a rather experienced ruby developer about how he didn’t understand what all the hype was about with SASS and HAML and this use case makes it completely worthwhile to me.

What do you appreciate about SASS?