The Request:

Working on an international site presents unique challenges: often, sites have completely different content from one country or region to another. Sometimes that even goes beyond content to site appearance. In once instance we needed to brand a specific regional site (Columbia) with a different color theme than the others (red instead of green).  

All the regional sites live with in the same content tree and utilize the same physical files. I didn’t want to copy and rename all the CSS into a new folder since any structural changes would have to be duplicated. Remember, this was a color theme change only.  What I came up with was this:
 

The Solution:

Previous Setup
_styles.scss



New Setup
_styles.scss



_columbia-styles.scss



My _global-variables.scss partial holds variables that will not change regardless of theme (text colors, fonts, etc).  My _common-variables.scss partial holds variables particular to the regional sites that utilize the default green theme.  My _colombia-variables.scss holds variables particular to the special red theme (see a pattern?). Admittedly the naming of global-variables vs. common-variables partials could be improved.

Some things that would normally have been hardcoded into the CSS were abstracted out to variables (i.e. our spritesheet and some layout images) since those needed to be swapped out to match the theme of the site.  

Arc that overlays every page





Icon Sprites







This works great for styling regional sites with different branding, but what else could we do to improve the maintainability and organization of our code? We could use SASS’s variable inception: using variables to set other variables..  In that way we could have something like this:

_theme.scss

• //Global
• $gray-one: gray;
• $gray-two: darkgray;

• //Default Theme
• $green: green;
• $dark-green: darkgreen;
• $sprites: url(“/_framework/assets/spritesheet.png”)

• //Columbia Theme
• $red: red
• $dark-red: darkred;
• $sprites: url(“/_framework/assets/columbia-spritesheet.png”)

The _theme.scss sheet would be included at the top of our style sheets and then the _common-variables.scss and _columbia-variables.scss sheets can just inherit the relevant variables.



 Voila! All the colors and images are consolidated into one spot!

Since each one of the main “regional site nodes” is its own master page we can then define which sheet we want to use where.

Now if another regional site needs to have a specialized theme all we have to do is update the spritesheet and layout images, set our new variables, and pull the correct variable sheet into the new regionX-styles.scss.  Given the ease with which this can be done we could even do temporary promotional/seasonal theme changes to an entire site.

What about you?  Have you run into a similar issue?  How did you solve it?  What would YOU have named your files (come on, I know you all have strong opinions)?  Let us know below!