Question

I have a SASS based site that has two subsites. They both use exactly the same HTML and CSS layout, but they change some simple brand background colours.

In my SCSS files I have a lot of the following:

body.subsite-one {
  #sidebar-second #wrapper p {
    background-color: $primary-color-one;
  }
} 

body.subsite-two {
  #sidebar-second #wrapper p {
    background-color: $primary-color-two;
  }
} 

#sidebar-second {
    padding: 10px;

  #wrapper  {
    border: 1px solid #000;

    p {
      font-size: 17px;
      /* etc... */
    }

  }

} 

Rather than declare the custom colours outside of the rest of the nesting, which quickly gets unweildy and messy, I’d like to do something like:

#sidebar-second {
    padding: 10px;

  #wrapper  {
    border: 1px solid #000;

    p {
      font-size: 17px;
      background-color: $primary-color-($subsite);
    }

  }

} 

My question therefore: Is there anyway I can set a variable, like $subsite above, that is changed by parent classes/id chains?

(NB: I can only have the subsite class set on the body, it’s not available on any other tag.)

Answer 1

The simplest solution is to just use the parent selector:

#sidebar-second {
  padding: 10px;
  #wrapper  {
    border: 1px solid #000;
    p {
      font-size: 17px;
      .subsite-one & { background-color: $primary-color-1; }
      .subsite-two & { background-color: $primary-color-2; }
    }
  }
}

If you have a longer list of sub-sites, you could automate that:

$subsites      : one  two     three   four   five;
$primary-colors: red  orange  yellow  green  blue;

#sidebar-second {
  padding: 10px;
  #wrapper  {
    border: 1px solid #000;
    p {
      font-size: 17px;
      @each $site in $subsites {
        $index: index($subsites,$site);
        .subsite-#{$site} & { background-color: nth($primary-colors,$index); }
      }
    }
  }
}