We’re getting SASSy

March 8th, 2011 by Infront Support

Working with Ruby on Rails, it was only a matter of time before we looked into SASS for generating our CSS. And boy, am I excited!

When we talked about moving to SASS with our development team someone said, “So it does what I always thought Cascading Style Sheets would do?”, which seems to me like a pretty good way to sum things up. It’s features make it much closer to the way other programming languages work and it makes a whole lot more sense in a development environment.

At it’s basic, SASS allows for reusable code. It supports the use of variables, mixins (aka, reusable code snippets), class inheritance, nesting and functions, amongst other things. It makes CSS much easier to read and, most importantly, to maintain.

We will be writing SCSS, the newest version of SASS, which uses the same syntax as standard CSS, making it easy to integrate with our older code and workflow. At the end of the day, the SCSS code we write is output to standard CSS, which is what websites use.

Here’s a little snippet of some recently written SCSS:

$rust:#763901;

a {
color: $rust;
text-decoration: underline;
&:hover{color: lighten($rust, 15%);}
}

And the CSS that it outputs

a {
color: #763901;
text-decoration: underline;
}

a:hover {
color: #c25e02;
}

Not a whole lot to look at, but as you can see, I can reuse the hex color for “rust” over again without having to copy/paste or remember that funky number. I can also use the function “lighten” to create a color that is close to rust, without having to open Photoshop and choose another hex value. To simplify things even more, I can nest the hover state so the code is much more concise.

So what does this get us? Hopefully, a happier, more productive work flow and sites that are much easier to edit. Aren’t you excited too?

Comments are closed.