title: Effectively reusing css rules within other rules
body: <p>Here's a simple example of what I'm looking to do.</p>
  
  <p>I want to define a css rule for a 2 gradient backgrounds - <code>blueGradient</code> and <code>greenGradient</code>.
  I want all elements with css class <code>foo</code> to have the <code>blueGradient</code> rule, and on hover have the <code>greenGradient</code> rules.</p>
  
  <p>So, here's how I want my HTML to look:</p>
  
  <pre><code>&lt;div class="foo"&gt;Hello&lt;/div&gt;
  </code></pre>
  
  <p>This should have a blue gradient normally, and green when I hover on it.</p>
  
  <p>Ideally, I want my CSS to look like this (I know it's not legal):</p>
  
  <pre><code>.blueGradient {
  ...    
  }
  .greenGradient {
  ...
  }
  .foo {
  &lt;#include blueGradient&gt;
  }
  .foo:hover {
  &lt;#include greenGradient&gt;
  }
  </code></pre>
  
  <p>What's the best way to achieve this?
  If something like this isn't possible, what's the best way to achieve this without having several copies of the blue/greenGradient definitions all over my CSS rules?</p>
  
  <p>I know I can change my HTML to look like this:</p>
  
  <pre><code>&lt;div class="foo blueGradient"&gt;Hello&lt;/div&gt;
  </code></pre>
  
  <p>But then, how do I deal with the hover (I don't want to use JS)?</p>