title: How to compose multiple classes into a single semantically-named class?
body: <p>I've been reading up on Block-Element-Modifier naming conventions, semantically-named style rules, etc. and I'd like to replace multiple class names in my html with a single, semantic class name. Can't seem to make it happen, though. Example:</p>
  
  <p>I'd like to replace my Bootstrap navbar </p>
  
  <p><code>&lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;</code></p>
  
  <p>with </p>
  
  <p><code>&lt;nav class="header__navbar" role="navigation"&gt;</code></p>
  
  <p>I know I could use jQuery to do this procedurally, but I'd prefer not to. I've tried several approaches using variable names, #{} interpolation syntax, mixins, and @extend, etc. but just get syntax errors or invalid results.</p>
  
  <p>Is this just not something Sass was designed to do?</p>