Andy Hulstkamp

about creating online experiences

24. May 2012

SASS and Compass

Tools/frameworks that minimize boilerplate code while not abstracting away the underlying technology are wonderful. Thanks to SASS and Compass it is actually fun to work with CSS3 and all browser specific prefixes. The combination is a great timesaver and helped me a lot to make the about page of cocomoshi just a little more playful. Here’s a little variation.

SASS, Compass and css3 transforms in action

All the CSS3 transforms would have been a pain to do orchestrate properly. With SASS and COMPASS on top of it, a simple mix of variables, mixings, loops and props gives great flexibility and productivity.

This will produce 9 areas on a sprite including transitions that form the basis for the effects shown in the prototype. Great stuff if you come from Flex and loved the approach to transformations.

.
.
@import "compass/css3/transition";
@import "compass/css3/transform";
.
.
div.picture {
    width: 100%;
    height: 100%;
    @include transition-property(all);
    @include transition-duration(0.25s);
    @include transition-timing-function(ease-in-out);
    @include background(url("../images/impressionists-v1.png") no-repeat -0px 0px);
    $xOffset: 270px;
    $yOffset: 405px;
    @for $row from 0 through 2 {
        @for $col from 0 through 2 {
            &.pic#{($row * 3) + $col} {
                background-position: ($col * -$xOffset) ($row * -$yOffset);
            }
        }
    }
}

Images taken from the art wolf

further reading

Wintersmith custom template - Snowboot

Migration of this blog from Wordpress to Wintersmith. Notes about how to customise Wintersmith Templates. Creation of a custom wintersmith template called 'Snowboot'.

Milchglas - a custom Wintersmith template

A custom Wintersmith template that is compatible with Version 2.0.* of Wintersmith.