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
_styles.scss

image07.png

New Setup
_styles.scss

image05.png

_columbia-styles.scss

image00.png

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

image06.png

image03.png

Icon Sprites

image02.png


image04.png


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.

image01.png

 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!

Share This Post:

Twitter Pinterest Facebook Google+
Click here to read more Tutorials posts
Start a Project with Us

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 unfilling 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 Email

Enter your email address to subscribe to the BizStream Newsletter and receive updates by email.

‚Äč