Sass – CSS reloaded

One of my newest Tools for my daily design activities includes Sass. CSS is of course not a real complex technology in itself. However CSS does have some shortcomings. Inheritance, variables and nested rules are some features that I personally would have loved to see in CSS. Luckily though, this is where Sass comes in. Sass in an CSS extensions that allows you to write .sass files instead of .css files and have these files compiled into css automatically. To use Sass, all you have to do is to install the “haml” rubygems package, which is actually another templating syntax for Ruby on Rails. In order to have your .sass files compiles to CSS, you have to tell sass to watch them using your command line: sass –watch style.scss:style.css. You can also watch whole directories: sass –watch stylesheets/sass:stylesheets/compiled. Here are a few of Sass’s features that will show you, what it can do for you:

Easier syntax

You will get the idea. There are no brackets and no semicolons:

body   
   color: #000000
   font-family: Tahoma,Geneva,sans-serif
   font-size: 13px

The downside of this syntax is, that you get used to it pretty quickly, but since Sass works on all platforms, there is nothing that keeps you from just just using Sass exclusively 🙂 .

Variables

This comes in handy, if you for instance deal with many different colors or other properties. Just assign a variable to a property and you can easily change colors for all your stylesheets :

$green : #6C9424
body   
   color: $green
   font-family: Tahoma,Geneva,sans-serif
   font-size: 13px
a:hover
   color: $green
div.mydiv
   border-top: 1px solid $green

This can be a huge time saver. Among other things I am now working on a theme with for different color schemes. Variables make it really easy to change and adjust your colors, since don’t have to find all of your selectors using a particular color.

Selector inheritance

I also love this feature. Sass allows you to inherit the styles from different selectors. I personally have found myself to use particular properties over and over again in my CSS files. Here you have the same problem as in the before mentioned example: you will have to edit all occurrences of your properties when making changes to these properties. Sass helps :

.heading-font
  font-family: Tahoma, sans-serif
  font-size: 16px
  font-weight: normal
span.mycontainer span.heading
  @extend .heading-font

I hope you get the idea. Usually during the theming process, you have different selectors with the same styles, often times split across many different css files. Using selector inheritance allows you to easily make the changes editing only one property of one selector.

Conclusion
Sass makes your design life easier. You write less, easier maintainable code and don’t repeat yourself. Thats a good thing. You will of course find a more extensive documentation on the official Sass web site. However I hope I was able to give a nice, clean and straight forward introduction on this im my opinion really awesome tool.