aquiline ascension

Sass!

Occasionally I dabble in web design. All of my sites and blogs (except for the Wordpress one) were designed by me, for better or worse. I don't pretend that I'm very good at it, and I'm probably doing a bunch of things that real designers consider no-nos. (At least I'm not using tables! Although I want to...)

This site especially has a design that many people would either love or hate at first sight, with the rounded corner overload and the gradients. (Unless you're using IE, in which case you probably don't see any rounded corners at all, and strange colors. I don't know how the IE developers manage to mess things up every single time, man. That must take a lot of talent.)

Anyway, so I designed it from the ground up, and I could go into a long rant here about how much CSS sucks for layout (as in, puttings things where you want them; it's great for fonts and colors and everything). Instead, I'll focus on a tool that made working with CSS less painful. It's called Sass, and it basically gives CSS some features that are common in programming languages.

The front page pretty much says it all. You get variables, nesting, mixins (much like functions), imports (much like modules or include files), etc. The tutorial mentions all these and more. Installing it was a breeze (partially because OS X comes with a version of Ruby preinstalled). The "watch" feature was very useful as well (when you change the Sass source code, a CSS file is automagically generated from it).

Sass's variables and mixins allow you to reuse a lot of code instead of having to repeat it everywhere with minor or no changes. For example, here's a mixin for rounded corners:

@mixin rounded-corners($radius: 7px) {
    /* rounded corners for all major browsers */
    border-bottom-left-radius: $radius $radius;
    border-bottom-right-radius: $radius $radius;
    border-top-left-radius: $radius $radius;
    border-top-right-radius: $radius $radius;
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
}

(Based on this article, by the way. It appears IE8 does not support this. Feel free to drop me a line if there's a better way to write this.)

As said, the above mixin works much like a function, and you can add it to other CSS blocks, e.g.:

#blog-header h1 {
    @include rounded-corners(14px);
    ...
}

Similarly, you can build a mixin to create cross-browser gradients:

@mixin gradient($color1, $color2) {
    background: $color1;  /* default */
    /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr='$color1', endColorstr='$color2');
    /* Safari, Chrome */
    background: -webkit-gradient(linear, left top, left bottom, 
      from($color1), to($color2));
    /* Firefox */
    background: -moz-linear-gradient(top, $color1, $color2);
}

#blog-header h1 {
    @include gradient(#FFE000, #FFFF00);
    ...
}

"Local variables" and simple arithmetic are supported as well:

@mixin sideblock {
    $padding: 10px;
    width: $image-width - ($padding * 2) - 2;
    ...
}

I will definitely use this again the next time I need to build a site. CSS isn't a programming language, but it definitely makes sense to apply some programming language principles and techniques to it, if only to avoid repetition.