Cascading Stylesheets are a brilliant and now ubiquitous mechanism for styling webpages. Draw borders, add colors, arrange the content, and make the whole site look presentable. Of course, CSS is not perfect.

The major annoyance for me has been the lack of support for variables. I’d like to say, “I want the same color on this border, this text, and this background,” or, “I want this padding to be the same as this margin and that border width.”

Sass solves this problem by extending the CSS language. Any valid CSS file is already valid SCSS, but in an SCSS file you can do a lot more. Whenever you change your SCSS file, sass automatically recompiles it into a valid CSS file. Browsers are indifferent, since they’re just getting standard CSS all along, but web authors get a much better development experience.

Variables are of particular interest to me, and sass supports them:

$color = #efefef;
.something { border-color: $color; }
.something-else { background: $color; }

And that’s only the beginning. Variables can also be used in mathematical expressions (e.g., width: $standard-width - 10px; to account for some padding, perhaps), and even in functions that generate CSS rules with slight variations.

I also particularly like the ability to add “parent references”:

#some .lengthy .selector a {
    color: black;
    &:hover { text-decoration: underline; }
    &:visited { color: purple; }
}

I just started using SCSS, and I already love it.