sass classes for colorizing in html : <p>i would like to create sass classes, such as .blue and .bg, 
but depending on which i use, it should colorize the fonts and/or the background.</p>

<pre><code>// Classes for colorizing elements

.blue {
  color: $primary-color;
  &amp;.bg {
    background-color: $primary-color;
    color: initial;
  }
}

.light-gray {
  color: $light-gray;
  &amp;.bg {
    background-color: $light-gray;
    color: initial;
  }
}

.medium-gray {
  color: $medium-gray;
  &amp;.bg {
    background-color: $medium-gray;
    color: initial;
  }
}

.dark-gray {
  color: $dark-gray;
  &amp;.bg {
    background-color: $dark-gray;
    color: initial;
  }
}

.black {
  color: $black;
  &amp;.bg {
    background-color: $black;
    color: initial;
  }
}

.white {
  color: $white;
  &amp;.bg {
    background-color: $white;
    color: initial;
  }
}
</code></pre>

<p>the use of <code>color:inherit</code> here is repetitive and inefficient.</p>

<p>for example, if I use <code>.black .bg</code> than ONLY the background-color should be black.</p>

<p>If I only use <code>.black</code>, than ONLY the font-color should be used.</p>

<p><code>.bg</code> alone doesn't have to work in this case</p>

<p>Which SCSS/SASS elements can i use to achieve small and efficient code?
Thanks!</p>
