SASS CSS Pre-Processing Technique
Can You Show Me That In Red, With A Wider Sidebar And In Verdana?
How CSS Pre-Processing Revolutionises Your Relationship With Indecisive Design Clients
Every designer has been there at some point. After delivering the perfect design image to the client – almost exactly mirroring the sketches and discussion at the meeting a week ago – the dreaded e-mail comes back asking for a colour, style and layout change.
A whole host of changes are required that will take hours to complete – hundreds of individually coloured, shaded and styled elements all have to be recoloured to ‘try out’ this new red look. On top of that they want to see the sidebar changed – cue some edits to all your text boxes, sidebar area and don’t forget to change all the fonts too! The old way of getting sign off on design can be a real pain – working in an image editor doesn’t feel like the right way to go but editing hundreds of lines of CSS wasn’t a whole lot of fun either.
CSS Preprocessing Introduction
The idea that we can extend CSS by adding some features then processing that code to produce the final CSS is called preprocessing CSS. SASS (Syntactically Awesome Stylesheets) is one of the most popular forms of this technique and includes four powerful new features – namely nested rules, variables, mixins, selector inheritance and many useful functions.
The one that will be most powerful when dealing with our indecisive client is variables. Some edits that would have taken hours such as the edits in our title example can take simply seconds using a code based design approach and combining that with CSS preprocessing.
The Steps Using Plain CSS
Designers working straight in code have long enjoyed the benefits of being able to simply change some CSS elements and see an immediate response in their browser window. Fonts can be tried out, colours quickly changed and clients can experience the output live instead of statically on a painstakingly recreated image. When a client requests as many changes as above, however there can still be a lot of steps.
Firstly the designer would have to find all the instances of the old colour (let’s say blue) in the design and amend those to red’s. The correct shades of red (darker or lighter) for all other elements would need to be calculated then applied to those elements by hand. Some use of ‘search and replace’ will speed this step up.
After adjusting the colour a simple search and replace is likely to solve the font issue. Some checking to ensure the fallback fonts are also adjusted will be required though – it’s no good changing the main font from a serif font to a sans-serif only to leave all the fallback fonts as serif varieties. Luckily again some search and replace will save time here.
The sidebar width probably depends on the overall sheet width either through a calculation based on the fixed width of the site or simply a percentage of a fluid width. This will likely be a simple adjustment regardless of whether we use preprocessing. The technique for doing the calculation using preprocessing is exciting, however as for some complex grid based designs the size of the grid could be amended and the whole site fall into place in a site coded in SASS.
Some SASS Examples
Let’s see how variables and calculations could be applied to the width.
$sheetwidth = 1000px;
$sidebarwidth = 250px;
.article {
width = $sheetwidth - $sidebarwidth;
.
. (rest of our article CSS)
.
}
As you can see above if your client asked for a wider sidebar you could simply amend that variable in one place in your document. All other elements (such as the width of our articles) that depend on that variable would automatically be resolved in the CSS that SASS outputs when you process it. Applying this to some more complex designs can lead to absolutely huge savings.
There’s some even more fun changes you can apply to colours. Imagine a swap from red to blue in normal CSS. Lots of different shades might have to be changed manually. In SASS where the shades of elements can depend on each other (for example a border that’s darker than a background) we can simply have one change to make to completely change our site from red to blue.
$siteshade = #000061;
.somebox {
color: $siteshade;
background-color: lighten($siteshade, 60%);
}
All we need to do to change from blue to red is to change the variable $siteshade.
Hopefully this introduction to SASS and the powerful use of variables in your straight to code designs will inspire you to take this step in your next development project. With huge time savings, easier to modify code and the opportunity to trial your designs in live format with your clients, there’s no end of positive opportunities for your next project whether it’s an American car insurance comparison site or a personal blog for an artist.
