title: Nested classes in SASS
body: <p>I have the following code:</p>
  
  <pre><code>        li {
              a {
                  /* style removed for brevity */
                  &amp;:hover {   
                      color:#4f9269;
                      @include background-image(linear-gradient(top, #fff, #f0f6f2));
                  }
              }
              &amp;.active a {
                  color:#4f9269;
                  @include background-image(linear-gradient(top, #fff, #f0f6f2));
              }
          }
  </code></pre>
  
  <p>When a menu item is active the active class is applied to the li, so I have had to apply the CSS like this.</p>
  
  <p>I have also consiedered writing a mixin:</p>
  
  <pre><code>@mixin activestate() {
      color:#4f9269;
      @include background-image(linear-gradient(top, #fff, #f0f6f2));
  }
  </code></pre>
  
  <p>And then doing this:</p>
  
  <pre><code>        li {
              a {
                  /* style removed for brevity */
                  &amp;:hover {   
                      activestate();
                  }
              }
              &amp;.active a {
                  activestate();
              }
          }
  </code></pre>
  
  <p>Normally with CSS I would write something like this</p>
  
  <pre><code>li a:hover, li.active a {
      /* active styles here */
  }
  </code></pre>
  
  <p>I was wondering if there was a way with SASS to achieve similar output?</p>