An hour with SASS for better and faster designs

Being a programmer, I don’t know anything about design. But I cannot help but think of a perfect world where CSS is written as a program with logical steps and variables.

And that’s where SASS comes in, and it over-delivers.

You write a .sass file or .scss (depending on syntax preference) and it generates a CSS file.

It provides support for variables, mixins, and several other functions. Think of it as CSS on steroids.

We had our eyes on SASS from a long time, it wasn’t until today that I really played with it using Crowd Vox modern theme.

So, the basic idea was to cut down theme customization time using reusable colour codes and other design properties. This is really early draft of what actual production-level work would look like, but it’s awesome as a concept that I cannot resist sharing it.

Somewhere down the line, we’ll integrate SASS to be a part of our in-built themes, but until then…

CSS Refactoring

As the part of process, I had to refactor style.css from modern theme, I separated some instructions to a new dynamic gen.sass which is compiled to gen.css.

All source files are provided at the end of this article:

gen.sass (The SASS based dynamic CSS)

gen.css (Generated CSS file from above SASS file)

style.css (Refactored version)

Let’s get to it:

I heavily used colour auto-generation functions, functions like darken(), lighten() to automate colour codes for fonts, buttons, headers etc. (You know being a developer and all, and having no colour sense)

In the snippet above, we’re generating whole palette from a single colour.

Using such schemes, it was an easy task to generate alternate coloured themes. OK, warning again, this is not work of a professional designer, but a programmer so bear with me:

This one is a bit too much:

The point I’m trying to make here is that using this you can really cut down your designing time and utilize full power of CSS.

You can even pick up popular colour combinations (one like Mona Lisa painting combo) from websites like this and start playing with different combinations in minutes.

This combo produces a better design then what you’ve seen before:

OK, let’s explore little more. There’s another experiment with image based backgrounds and opacity.

So in above lines we have made our tab colours a little transparent based on our base colours. Similarly:

Some minor tweaks and here we go:

Another generated theme within 10 minutes:

Download sources here.

Small Instruction:

If you decide to use this, you would need to include gen.css in your layout.ctp file.

Add it below compressed CSS inclusion.

Love it? Hate it? Let us know…