Implementing simple site themes using SASS

SASS is awesome, I first discovered it around 9 or so months ago now and have loved it ever since. Recently I implemented an unplanned theme system to a web app and because I was doing the styles in a modular/extendable way thanks to SASS, it was very easy. It took around around 30 minutes to have 8 distinct colour themed stylesheets.

The app was originally split up into a structure like this:

• base (folder)
• _colors.scss
• _fonts.scss
• _sizes.scss
• _includes.scss
• site.scss
• _<otherareas>.scss

To make the stylesheets I moved the relevant colors from the _colors.scss file to the new stylesheet (red.scss, green.scss, etc.) and had those file include the old stylesheet (site.scss).

$primary-color:#0D58A6;
$primary-color-hover:#04376C;

$secondary-color:#FF9900;
$secondary-color-hover:#A66300;

@import "_site";