Sassy CSS

Published on and tagged with css  ruby

Those who follow me on Twitter probably know about my love-hate relationship with CSS. To ease the pain of working with CSS I switched to Compass, a stylesheet authoring framework. With Compass, you write the stylesheets in Sass (Syntactically Awesome Stylesheets) instead of CSS. Sass is basically CSS without brackets and semicolons, as you can see in this example from the Sass website:

h1
  height: 118px
  margin-top: 1em

.tagline
  font-size: 26px
  text-align: right

However, with the upcoming Sass 3 (it is planned to be released on May 10, 2010) a new format gets introduced: SCSS (Sassy CSS). It is a superset of CSS, i.e. each CSS file is automatically a SCSS file (you simply have to change the file extension from “css” to “scss”). So the example from above in SCSS is just plain CSS:

h1 {
  height: 118px;
  margin-top: 1em;
}

.tagline {
  font-size: 26px;
  text-align: right;
}

Not that exciting, isn’t it?

Where SCSS shines is when it comes to the integration of the Sass features (nesting, variables, and mixins) into this format. The devs did a very good job to make it feel like those features are native CSS.

Let’s have a look at some examples.

Nesting:

#header {
  background: gray;
  a {
    background: white;
    color: black;
  }
}

Variables:

$background_color: gray;

#header {
  background: $background_color;
}

Mixins:

@mixin red_border($border_width) {
  border: $border_width solid red;
}

#box_a {
  @include red_border(5px);
}

#box_b {
  @include red_border(10px);
}

Personally I really like the new SCSS format, and I can only recommend to try it out for yourself.

10 comments baked

© daniel hofstetter. Licensed under a Creative Commons License