found drama

CSS. Verbose, repetitive, rife with bizarre quirks.

Can’t say that I’m a fan. On the web, you’re using it out of necessity. Even the CSS masters out there must admit, there has got to be something better.

Fortunately, there’s Sass. A super-set of CSS, it helps to eliminate some of CSS’s most obnoxious aspects during the development lifecycle. By way of example, my ten favorite parts about Sass:

1. Nesting. Let’s get the most obvious one out of the way first. You know how CSS makes you write stuff like this:

   	#container .post code,
   	#container .post tt,
   	#container .post pre {
   	font-family: Consolas, Courier, monospace;
   	}

   view raw 1a.css hosted with by GitHub

   Well, Sass will lets you do that like this:

   	#container .post {
   	code, tt, pre {
   	font-family: Consolas, Courier, monospace;
   	}
   	}

   view raw 1b.scss hosted with by GitHub

2. Nesting. Again? (you say)–check this out. Whereas CSS would require this:

   	.styledText {
   	font-family: Georgia, Times, serif;
   	font-style: oblique;
   	}

   view raw 2a.css hosted with by GitHub

   In Sass you can do this:

   	.styledText {
   	font: {
   	family: Georgia, Times, serif;
   	style: oblique;
   	}
   	}

   view raw 2b.scss hosted with by GitHub

   More lines perhaps, but it feels less verbose. And more manageable.

3. Includes. CSS already has this notion of an @import rule, and while Sass overrides borrows the directive (with a twist on the exact syntax), it goes a step further. While the CSS @import results in an extra http request for the imported stylesheet, Sass will auto-concatenate the files–getting the request down to one. (And as a side-benefit, reducing your CSS build/deploy phases down to just calling Sass on your scss file(s).)

   	/* CSS: */
   	@import url("_reset.css");
   	/* Sass: */
   	@import "reset";

   view raw 3.scss hosted with by GitHub

4. Variables. Totally missing from CSS, Sass brings these to the table. Observe:

   	$theme_accent: #771100;
   	$theme_bg: #222222;
   	#container {
   	h1, h2, h3 { color: $theme_accent; }
   	.post {
   	border: {
   	$accent_border: 1px $theme_accent;
   	$dark_border: 1px $theme_bg;
   	top: $accent_border;
   	left: $accent_border;
   	bottom: $dark_border;
   	right: $dark_border;
   	}
   	}
   	}

   view raw 4.scss hosted with by GitHub

   Need I go on?

5. Line comments. Again: // need I go on?
6. Mixins. Like variables on steroids. The Sass site’s example is great; I’ll reproduce here:

   	@mixin rounded-top {
   	$side: top;
   	$radius: 10px;
   	border-#{$side}-radius: $radius;
   	-moz-border-radius-#{$side}: $radius;
   	-webkit-border-#{$side}-radius: $radius;
   	}
   	#navbar li { @include rounded-top; }
   	#footer { @include rounded-top; }

   view raw 6.scss hosted with by GitHub

   And did I mention that you can set up your mixins to take arguments?

7. Validation. This shouldn’t be hot shit, but it is. If you’ve been screwing around with CSS long enough, you’ve likely run into a situation where some rule you’ve written isn’t taking and you can’t figure out why and it turns into a two-hour wild goose chase only to discover that you fat-fingered border as boarder or failed to close a curly bracket or some such thing. Your IDE might be warning you. But Sass goes a step further and puts the error message right into your page–right there at the top where you can’t ignore it. (It’s also a useful error message.)
8. Auto-minification. This is right up there with, and arguably part of Includes. Either way, depending on how you have your Sass compiler set up, you can have it crunch the CSS output, stripping all comments and extraneous whitespace ¹.
9. SassScript functions. As if the variables and mixins weren’t enough for you, there’s also a whole host of hot functions and operations that you can perform in “SassScript”. For example, Dan Rubin recently Tweeted:
   

   CSS needs to allow me to write: * { saturation:+15%; }

   And of course, Sass has almost exactly this:

   	$my_color: #77110;
   	.post-title { color: saturate($my_color, 15%); }

   view raw 9.scss hosted with by GitHub

   …and a whole bunch of other color functions. Among other functions.

10. Directives, control statements, and other functions. Maybe just more of the same from the SassScript functions above, but damn is there some great material here.

    	article {
    	$base_font_size: 12px;
    	$base_line_height: $base_font_size * 1.5;
    	font-size: $base_font_size;
    	line-height: $base_line_height;
    	/* simple math */
    	h1 { font-size: $base_font_size * ($base_line_height + 1); }
    	h2 { font-size: $base_font_size + 4px; }
    	}
    	/* some looping with conditional logic */
    	@for $i from 1 through 10 {
    	#flickr_badge_image#{$i} {
    	@if $i % 2 == 0 {
    	color: #3993FF;
    	} @else {
    	color: #ff1c92;
    	}
    	}
    	}

    view raw 10.scss hosted with by GitHub

All this amazing power… and I have just been casually exploring Sass over the past couple days. This project is a treasure trove and I hope that it is here to stay. My hat is off to the folks working on Sass. Marvelous work.

1. Granted, your mileage may vary on the download time savings from this kind of minification in a CSS file. After all, provided that you’re stripping your comments from your production CSS, most the file’s trivial bytes are whitespace and gzip basically does away with that overhead.[]

About Rob Friesel