Getting Started with SASS
I've known about SASS (Semantically Awesome Stylesheets) for a while now, but it's only since Steve Kruger's talk at the recent PNW Drupal Summit that I decided that it really did look simple to set up, fun to use, and that I really should give it a nudge.
If you're like me and are somewhat apprehensive about adopting 'new' (*) technologies into your workflow for fear that it will interfere with timelines and deliverables, I'd encourage you to make 1 hour in your day to get SASS running and to get your feet wet. I'm an hour or two into it, and I'm pretty sure that I won't go back to writing plain old CSS. SASS satisfies my logical, order-loving, clutter-free, maniacally-efficient side in a way that CSS cannot.
*new - in the sense that it's new to you...
What is SASS
SASS is a different way of writing your CSS. It makes CSS more programmy. It's something you use within your local development cycle and doesn't have any knock-on implications for your live production environment. You work within a .scss file, and when you save changes to that file, the linked .css file is updated. The css file is obviously then treated as any normal css file would be by the browser.
How do I get started?
Getting started is simple. Visit http://sass-lang.com/ for the 3 line install process. I'm on mac OSX, so I can only describe how I found it on that platform, but I'm sure that for PC and Linux users it's super-simple too.
- Crack open Terminal
- Type gem install haml
- Navigate to a directory where a stylesheet is that you want to SASSify. For the purposes of this explanation the stylesheet is named style.css
-
Type mv style.css style.scss
this copies your stylesheet file as a SASS file. -
Type sass --watch style.scss:style.css
this tells SASS to watch your .scss file and when any changes are saved to that file, to update the corresponding .css file.
Problems?
If you get a sass: command not found, then you most likely need to update your $PATH variable in your .bash_login file. Don't panic – this takes a second and is simple too. See this useful blog post: http://www.macgasm.net/2008/04/10/adding-a-new-location-to-your-path-variable-within-terminal/
Starting with SASS
Better and more complete documentation can be found at http://sass-lang.com/, but here's what I can share with you after an hour or two playing around:
Variables
Say you use the same hex colour value in your stylesheet 20 times for defining font colours and such, for example:
a:link { color: #60FF00; }
...
h3 { background-color: #60FF00; }
In SASS you could define a variable for this colour as follows:
$brightgreen: #60FF00;
and then use this variable in your style declarations:
a:link { color: $brightgreen; }
...
h3 {background-color: $brightgreen; }
Why is this cool?
- You don't have to remember those pesky hex values, just declare it once and then use your nattily named variable
- When Mr Designer comes along and decides that #60FF00 just has to become #60FF01, you only need to change the value in one place
Nesting
A nice way to keep your code all neat and tidy, with SASS you can nest your style definitions for maximum awesomeness:
ul.links {
border-top: 3px solid red;
}
ul.links li {
margin-left: 1em;
list-style: circle;
}
ul.links li a {
color: #60FF00;
}
becomes:
ul.links {
border-top: 3px solid red;
li {
margin-left: 1em;
list-style: circle;
a {
color: #60FF00;
}
}
}
Everything bundled tightly together. Lovely.
Mixins
For me these are very similar to PHP functions. Say you have a bunch of CSS 3 rounded corner definitions in your stylesheet:
.block1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5ps;
}
.block2 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
With SASS you could define a borderradius mixin and pass through the radius value to that mixin from within your style declaration:
@mixin borderradius($radius: 5px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.block1 {
@include borderradius();
}
.block2 {
@include borderradius(10px);
}
If no $radius value is passed to the mixin, it uses the default (in this case 5px).
Selector Inheritance
Say you've got some classes that share common styles. SASS allows you to specify selector inheritance as follows:
.regular-block {
border: 3px solid #CCC;
margin-bottom: 2em;
}
.important-block {
@extend .block;
border-color: #FF0000;
}
This gives you:
.regular-block, .important-block {
border: 3px solid #CCC;
margin-bottom: 2em;
}
.important-block {
border-color: #FF0000;
}
Concluding Thought
SASS puts the 'SASS' in Kicks Ass.
SASS is a different way of writing your css, and it offers the opportunity to compartmentalize your code into reusable chunks. That's what is really appealing to me.
It might not be the choice for you if you're working as part of a team (with multiple people working on the same stylesheets) as the file communication in SASS are only one way: SCSS > CSS. A change made to your CSS file will not be reflected in your SASS file.
As I say, I'm only a couple of hours in, so I apologize if anything I have posted is incorrect or n00bish. Let me know in the comments below.
