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.