At Organic our developers get together in a weekly 'Developer Cuddle', during which we discuss the latest in web development, discuss current technologies and the interesting things that we are working on.
This week we discussed how using SASS has improved our front end capabilities and workflow.
SASS, in the developers own words "makes CSS fun again". It allows developers to now code their front end styling in a more intelligent and programmatical way. For those who know a bit about coding CSS styles for a website you will be aware that it can be an often laborious and repetative task. Your HTML code can end up bloated with multiple styling classes that inherit a style defined in your stylesheet. SASS takes a giant leap in eliminating this from happenning.
For a start you can create "mixins". These are basically global methods that include hyrachical styling that can be reused. e.g.
@mixin myMixin {...}
to assign that mixin styling to an element use :
.my-element { @include myMixin(); }
You can also use progrmming syntax such as @if, @else, @for & @while. This allows you to eliminate repetition and apply styling conditionally. e.g.:
@for $i from 1 through 10 {...}
You can also use variables using the $ syntax, this allows you to do things such as create styles based on those variables. You can combine these in loops (e.g. @for) to create style rules with less code. Strings can also be created using variables, for example:
#{'element-' + $my_var}
SASS on it's own improves your styling workflow, but there are apps out there that can improve things even more for you!
Compass is an application that allows you to create styling projects. This creates a basic level framework for you and allows you to choose to start projects from existing frameworks, such as Twitter Bootstrap and Foundation. Compass aslo comes packaged with some pre-built SASS mixins for you to use. These mixins primarily (but not limited to) handle cross browser compatibility for you. If you have had to create styles only to have to reptitively type out all the browser vendor prefixes (e.g. -webkit, -moz), then fret no more! You can just include a mixin for these tasks, e.g:
@include border-radius(10px);
That is all the code you need to apply a border radius for all current browsers with, amazing!
We also use an application called Codekit. Codekit works with Compass and will watch your SASS projects (and javascript amongst other things) and compile your SASS code into CSS that gets packaged with your website and gets processed by browsers. It even tells you where you have errors in your code, there is no need for you to do anything other than code in SASS. Just let these apps do the hard work for you.
This is just scratching the surface of what you can do with SASS and apps such as Compass and Codekit. There is plenty of documentation on all of this, so it is easy to pick up. If you know CSS it will not be too big a leap for you.
It is now up to you to explore these things and have a play, which is the best way I personally find to learn these things.
Jon Wise
13. May, 2011 | #