title: Switching to CSS Custom Properties from SCSS variants
body: <p><strong>Goal</strong></p>
  <p>Is moving to CSS Custom Properties a good solution for the issue I describe. And if so, should I move away from variants in my SCSS entirely or is a hybrid of both ok (or frowned upon)?</p>
  <p><strong>Background</strong></p>
  <p>I'm updating a project that is 5-6 years old. This contains various 'Courses' and each has its own CSS file that uses a <code>_variables.scss</code> containing global styles which can then be used throughout the other 20+ component/block SCSS files.</p>
  <p>Each 'Course' is styled differently, so has its own CSS like the above. The core of each 'Course' is the same, however each will have it's own background-color/image and primary/secondary color themes. Which is included in the <code>_variables.scss</code> like so:</p>
  <pre><code>$color-primary              : rgb(41,206,190);
  $color-secondary            : rgb(166,8,176);
  </code></pre>
  <p>Which is then applied to elements like so:</p>
  <p><a href="https://i.stack.imgur.com/eCARk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eCARk.png" alt="Screenshot of example variant usage" /></a></p>
  <p>Each 'Course' is made up of several 'Units' and the request I have is to style each 'Unit' differently. So each 'Unit' could have a different background image(s) and primary/secondary colors for example.</p>
  <p><strong>Addition of Custom Properties</strong></p>
  <p>Without having a completely different CSS file (and 20+ SCSS files) for each Unit. I thought I'd look into Custom Properties. Initially just looking at color, I realised I could maybe apply a class to each 'Unit' <code>body</code> tag then apply different properties for each like so:</p>
  <pre><code>.style-1 {
      --color-primary: rgb(41,206,190);
      --color-secondary: rgb(166,8,176);
  }
  
  .style-2 {
      --color-primary: rgb(166,8,176);
      --color-secondary: rgb(41,206,190);   
  }
  
  .style-3 {
      --color-primary: rgb(250,20,34);
      --color-secondary: rgb(253,181,45);   
  }
  </code></pre>
  <p>And the relevant color is then inherited depending on the <code>body</code> class.</p>
  <pre><code>.btn--primary {
      background-color: var(--color-primary);
  }
  </code></pre>
  <p>So far this seems to work but I wanted to know - is this best practice and a good way to solve the issue I'm looking at? Or is there a better way to approach it?</p>
  <p>I noticed I couldn't setup these Custom Properties in my <code>_variables.scss</code> or apply them to variants like this: <code>$button-primary-bg : var(--color-primary);</code></p>
  <p>With this in mind, if this is a viable solution. Should I keep a hybrid of variants and Custom Properties? Or should I really be replacing my _variables.scss`, moving it into a 'root' file and storing all my 'theme settings?</p>