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.
great find! i will have to check it out.
@james: Good luck!
Looks cool.. I’ve been always delaying myself to learn and use Sass. Might give it a try.
@Abhimanyu: It is definitely worth a try. The only thing that takes some time to get used to is the “compiling” of the SCSS files to CSS.
is there anything similar that doesnt require ruby?
@james: There is a PHP port of Sass (and Haml), but it doesn’t support SCSS (yet)…
Less had this feature before to make CSS more simple http://lesscss.org/, I like HAML the companion of SASS, but never liked SASS to much, but right now Iam not using HAML I found love with zen coding which makes HTML creation really easy http://code.google.com/p/zen-coding/
@Boris: Thanks for your comment!
Yes, less was first with a CSS-based syntax. And I’m happy SASS adopted this feature as I didn’t like the old SASS syntax much…
For HTML I use HAML and so far I like it. I looked at zen coding a while ago, though I never became familiar with it, and hence I dropped it.
I definitely prefer LESS css to SASS. It’s more similar to the CSS syntax with pretty much the same feature set as sass and (soon) with a nice JS client-side compiler… I also don’t really like frameworks like Blueprint…
@Gideon: The syntax of LESS and the new Sassy CSS (SCSS) are almost identical (the “old” SASS syntax is a different story). For me, the primary reason to use SCSS over LESS is the Compass framework with its predefined mixins.