We've recently been using Sass in Drupal 7 via the base theme Sasson.

Sasson deserves a blog post of it's own - it's got many useful, non Sass features to speak of. Most importantly though, it does just enough, without getting in your way, or isolating too many settings to the admin interface. The project maintainers in particular, are refreshingly open and responsive.

But, what's so great about Sass, particularly in a real-world agency environment? I'm not going to cover everything - refer to SASS's great documentation for that but let's dive into some examples of it's major features, from a real world, recently completed project:

Variables

$background: #fff;
$body-text: #000;
$standard-padding: 30px;
$standard-line-width: 2px;
$block-width: 980px;

By far the quickest and most obvious time savers are variables. Most large websites will end up duplicating certain standard brand colours, text sizes and padding widths etc. across the site.

Not only is it tiresome to re-write these every single time (to the point where I dream about the hex codes for projects built 6 years ago), it's also prone to human error when the inevitable re-brand takes place and you have to search and replace each value.

Having these variables in a single, easy to read file, also has the knock on effect of making sure you Don't Repeat Yourself, as you'll very quickly pick up on duplications or unnecessary variations.

Moreover, once these variables are defined, it's incredibly easy to rebrand cookie cutter sites, by just swapping in new variable library files.

Even better, Sasson can provide variables defined via it's Drupal admin page. This is particularly useful for responsive grid layouts.

.views-row-odd{
    padding: [gutter-width] 0 [gutter-width] [gutter-width];
}
.views-row-even{
    padding: [gutter-width] [gutter-width] [gutter-width] 0;
}

Operations on variables

But what about variations on those standards? Sass allows for that, and more. You can perform mathematic operations on previously defined variables:

padding: $small-padding/2;

Even better, you can combine variables and operations. In the example below, I'm automagically catering for the extra space the padding will add to the width of the box

width: $block-width-$small-padding*2;

Mixins

Mixins are similar to variables, but with multiple lines.

This is a commonly used font-face mixin of mine:

@mixin font-gothic {
    letter-spacing: 0.015em;
    font-family: "alternate-gothic-no-2-d", sans-serif;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
}

Rather than repeat these 5 lines every time I want to include the custom font, I now just include the line as follows:

h3 {
    font-size: 24px;
    @include font-gothic;
}

The time saving potential of Mixins are endless. They're particularly great at condensing multi-line CSS3 vendor prefixes down to one line.

Mixins & Arguments

One of my favourite features of Mixin's is the ability to add arguments. Again, multi-line CSS3 effects, or cross browser fixes can easily be condensed to one liners. Consider the min-width hack.

@mixin minimum-width($min-width)  {
    min-height:$min-width;
    height:auto !important;
    height:$min-width;
}

In your scss file you can now just supply a pixel value and all the work is done for you:

#navbar { 
    @include minimum-width(980px); 
}

Nesting

Once you've used it, you'll find it hard to look back from nesting. Traditional CSS just seems so bloated in comparison.

Two of my favourite time savers:

Nested lists

ul li {
    list-style-type: circle;
    ul {
            padding-left: 1em;
        li {
                list-style-type: square;
            }
    }
}

Link and hover states

a {
    &:link,
    &:visited {
            color: $body-link;
            text-decoration: none;
    }
}

a {
    &:focus,
    &:hover,
    &:active {
        color: $body-text;
            text-decoration: underline;
    }
}

Conclusion

As the examples above should make clear, not only does Sass make CSS quicker, easier and dare I say it, more fun to create, especially in large CMS contexts; it also drags CSS kicking and screaming into the 21st century, finally adding the dynamic functions we've been afforded in every other language.

Indeed, The W3C has taken note and a working draft for 'CSS Hierarchies' (think nesting) is gaining steam - well, W3C steam at least, at the usual rate of change it will probably be ratified in 2064!

What about LESS?

LESS CSS (not the LESS Framework) was influenced by Sass - in fact, Sass's newer SCSS syntax was in turn added as a response to LESS 's cleaner, reusable syntax.

We tried LESS on another project, before settling on Sass. To be honest, there's not a lot to choose between them. We just found the Sass compiler slightly easier to work with and the brilliant Drupal integration offered by Sasson was the final nail in the coffin.

The IxDA is a global network dedicated to the professional practice of Interaction Design. It encompasses, among others, UX, IA, graphic design and programming.

I've been to many conferences in the past, including dConstruct, various Carsonified FOWA's & FOWD's (usually of varying quality) and quite a few geekier offerings (PloneCon, DrupalCon and the brilliant Yahoo! HackDay).

IxD12 was head and shoulders above any conference I've attended in the past, both in organisation and content. I found the variety of theoretical and practical advice on offer to be perfect.

The only downside was that I've visited Dublin many times before, but that's a minor quibble¹.

Top 3 talks

Over the coming weeks I hope to write up my extensive notes online, but my top 3 highlights of the many great talks were:

• The Mobile Frontier - Rachel Hinman - An instantly useful talk regarding expanding trends in mobile. Tons of useful information in Rachel's slides that you can put in practise immediately.

• Understanding Us: The Next Frontier - Dirk Knemeyer - A slow burning talk, that really massaged my brain. Lots of his central points have stuck in my mind weeks later. (His slides aren't online yet, as far as I can tell. There's similar on slideshare.net for now)

• Does It Have Legs? Information Architecture Heuristics for Interaction Designers - Abby Covert - Required reading for any UX/IA professional. Can't wait for the poster.

Trending Topics

The recurring themes over the 3 days I attended seemed to be:

• Mobile is here and has been for a while. In fact, we should all be thinking cross-channel now.

• We are all Cyborgs. Cyborg Anthropology - the study of human use of technology - is an increasingly important field.

• Get ideas out of your head and into prototype as fast as possible. Their application will follow.

• Exchange skills. All UX professionals should be able to code at some level.

• Don't test in labs, test in the real world.

"There's no either/or anymore - digital is part of our creative lives, creating new possibilities and opportunities. But does that mean pre-digital knowledge, expertise and aesthetics are redundant, or is something much more interesting happening as old and new come together in the mix?"

I attended this brilliant panel at the Pervasive Media Studio, The Watershed, Bristol (here's a great supporting blog post).

Much of my enjoyment came from the wide variety of expertise on offer from the speakers:

Jonathan Waring - Self confessed type nerd

Jonathan, Creative Director, 3Sixty, came from a pre-digital, traditional publishing background, to the extent that the punishment of his first employer in Germany was to force him to painstakingly lay-out, on a letterpress, a poster for a local company - a task that took 4 days.

His central point was based around this experience - perhaps, with the technology currently at our disposal, we are far too quick to dive into creating, without properly considering our approach and taking time.

I didn't buy into this completely, a bad designer is a bad designer whatever their method. But it did ring true with Ben Bodien's article for 24 ways, suggesting that Web Development is becoming a craft and we should build and hone our tools and techniques over time.

David McGoran, Roboticist, Puppeteer & Dancer

David's talk (he's from Rusty Squid a Bristol based collective) was my favourite of the panel, if only because the (frustratingly quick) flash of his Heart Robot tugged at my heart strings - as I'm sure he intended.

David's argument, passionately put, was that we are base, emotional animals and that technology developers would do well to remember this. Although, how to do this, with emotionless computer screens is a challenge. The Gamificaiton approach is a blunt tool to harness our dopamine rush. But he still made me want to get my Arduino out and make something real.

His talk included illustrations of dancers and performers from the 17-1900's, many of whom developed neutral masks or covers for their faces and expressed all of their emotions through their body and pose. Many robotics engineers, would do well to look back at the library of images these early pioneers created, detailing each and every approach for expressing meaning or emotion.

Another great tangent he explored, was how the technology of Greek Theater was often decades ahead of the military technology of the time. Yet now, performance technology is little more than high definition 3D displays.

One centrally agreed point of the night, from David's talk, is that much of the non-digital technology that is dying, is actually not as old as we think.

Do we really care about the death of newspapers? After all Martin Luther was an avid tweeter 500 years ago.

Baldur Bjarnason - PhD subject: eBooks and interactivity

I learned a lot from Baldur, including the real origin of the phrase "You can't tell a book from it's cover".

In fact books never had designed covers before mass production, for the unwashed masses, came along. Before that, rich society types had their books binded individually and decorated to their tastes.

Baldur also expressed his dislike of the ever popular grid systems and it's modern day equivalent - the Windows Phone 7 Metro design language. Both systems that have taken the emotion and fun out of design, whilst trying to keep a standard blank playing field for all users.

His argument was that Apple products were so loved, because they chose to embrace emotion in design - people enjoy them (Although, personally I find their recent skeuomorphism trend slightly jarring).

Finally, he mentioned many interesting developments in the eBooks arena, the subject of his PhD thesis. Many sounded very useful - standardised hash tags for each page of a book for example - but it couldn't help but remind me of of Nicholas Carr's key arguments in 'The Shallows': we are meant to be reading and consuming information in considered isolation, not skimming the surface and exploring tangents on Wikipedia every 2 minutes.

Simon Johnson - Game Designer

I'm a big fan of Simon Johnson, Slingshot and Igfest's work - the success of their now multi city Zombie Apocalypse game speaks for itself.

I was less aware of their work with the Tweeture Bot and 'The Hat Game'. Both great adaptations of existing social media, which both produced some brilliant off-line results.

Another talk that made me want to get the hardware out again.

A final point of the evening, regarding the over-prevalence of Victorianism in recent retro 'designs' was amusingly undermined by Simon and David's rather dashing flat caps.

A great night. Many thanks to hosts by Chris Sharratt , Editor of creative industries website creativetimes.co.uk, and Clare Reddington, Director, iShed and Pervasive Media Studio