title: SCSS generate prefix for class
body: <p>I want to be able to generate <code>.pre-class</code> and <code>.sub-class</code> for any <code>.class</code>.</p>
  
  <p>e.g. <code>.title</code>, <code>.pre-title</code> and <code>.sub-title</code> or <code>.heading</code>, <code>.pre-heading</code>, <code>.sub-heading</code></p>
  
  <p>I can do this via passing class variable (example below), is there any cleaner/straightforward way to achieve prefixes for the class? </p>
  
  <pre><code>$className: heading;
  .section {
    .#{$className} {
      color: pink;
    }
    .sub-#{$className} {
      color: red;
    }
    .pre-#{$className} {
      color: green;
    }
  }
  </code></pre>