One CSS, Multiple Sites

Use Sass to branch a single code base into distinct style sheets

June 7, 2014

As the lead designer and front-end developer for Rensselaer Giving, Rensselaer Alumni, Rensselaer Parents, I needed to create a similar look on multiple websites that would be running on very distinct Content Management Systems (CMSs). Each site would have a few unique visual design rules. And each CMS imposes unique HTML structures that require different HTML.

In developing the front-end mock-ups, I had already introduced a branch in my CMS to accomodate a unique IE8 style sheet. I used the same methodology to branch my Sass files into separate style sheets for each channel

1. Define a variable at the beginning, in a variables module

   Default False

   $drupal: false !default; /define variable, consider putting this with the rest of your variables, in the beginning/
   
   

2. Define Unique Style Sheets

   Define Drupal Sass Style Sheet

   $drupal: true; /define variable/
   @import “style”; /import default style sheet /

3. Use variable to add any CMS specific style rules.

   If, Then; Else

   /Drupal uses #page for .wrapper/
   @if $drupal {
      #page {
        margin: auto;
      }
   }
   @else {
      .wrapper {
        margin: auto;
      }
   }

Working with multiple developers and CMSs poses challenges. In this case, one developer is using a standard theme’s HTML structure, which employed many IDs, and asked that I conform the CSS. The other developer is using my HTML structure, but doesn’t want the CSS to have any IDs. The solution above produces two separate CSS files that solve for both problems. Yet, all the styles are coded in one place. This solution is easier to efficiently keep the styles consistent across channels. It also trims down the CSS because the CSS file does not include unnecessary code intended for another system.

Learn more about creating effective media, view my Production Remarks.