Modularizing Site Themes Using Sass

By Chris Hamm On August 04, 2016

Modularizing Site Themes Using Sass

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


New Setup




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:

  • //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!
Click here to read more Tutorials posts
Start a Project with Us
Photo of the author, Chris Hamm

About the author

Chris got his degree in music education in 2006. Over the years he has directed musicals, taught voice lessons, and managed $10 million in sales for an artisan bread company. After becoming disenchanted with jobs that were personally unfulfilling and taking him away from his family, he decided to turn his programming hobby into a career. Becoming a developer means the opportunity to integrate his creative roots with his technological passions. He thinks BizStream is the perfect place to do that.

View other posts by Chris

Subscribe to Updates

Stay up to date on what BizStream is doing and keep in the loop on the latest with Kentico.