CODEWITHSUNDEEP
sass
Jon Hadley
Jon Hadley

Reputation: 5296

SASS - Parent dependent variable re-use?

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.)

Upvotes: 0

Views: 1256

Answers (3)

Jon Hadley
Jon Hadley

Reputation: 5296

It occurred to me that the following variation of Eric's answer should (also) work:

$subsites: subsite-one subsite-two;

#sidebar-second {
  .case-study-aside-block  {
    .views-field-title .field-content span {
      @each $var in $subsites {
        background-color: $primary-color+$var;
      }
    }
  }
}

However, I can't easily test this at the moment, due to a possible bug in my Drupal powered SASS compiler.

(Alternatively, if i can't concatenate the vars, I could step through the second list as he suggested.)

Upvotes: -1

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

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); }
      }
    }
  }
}

Upvotes: 6

Šime Vidas
Šime Vidas

Reputation: 185933

I'm not sure if this would work, but consider trying:

First, have a "_common.scss" with the common rules:

#sidebar-second {
    padding: 10px;

  #wrapper  {
    border: 1px solid #000;

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

  }

}

Then, crate a SCSS file for sub-site 1, and let it import that common file, but first set the $primary-color variable:

$primary-color: red;
@import "common";

// rules specific to sub-site 1 go here

Do the same for sub-site 2:

$primary-color: blue;
@import "common";

// rules specific to sub-site 2 go here

I'm doing a similar thing on my site; check out its source code here:
https://github.com/simevidas/ecmazing-site/tree/master/sass

Upvotes: 2

Related Questions