title: Set a variable in Sass depending on the selector
body: <p>I’ve got a website that’s using a few different ‘main’ colors. The general HTML layout stays the same, only the colors change depending on the content.</p>
  
  <p>I was wondering if I could set a color variable depending on the CSS selector. This way I can theme my website with a few variables and let Sass fill in the colors.</p>
  
  <p>For example:</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>$color-1: #444;
  $color-2: #555;
  $color-3: #666;
  $color-4: #777;
  
  body.class-1 {
    color-default: $color-1;
    color-main: $color-2;
  }
  body.class-2 {
    color-default: $color-3;
    color-main: $color-4;
  }
  
  /* content CSS */
  .content {
    background: $color-default;
    color: $color-main;
  }
  </code></pre>
  
  <p>I was thinking of using a mixin for this, but I was wondering if there’s a better way to do this—with a function maybe? I’m not that great with Sass, so any help would be appreciated.</p>