title: sass/compass: nested include of all-foo-sprites mixin
body: <p>I have generate automatic sprite classes with</p>
  
  <pre><code>@import "icons/*.png";
  @include all-icons-sprites;
  </code></pre>
  
  <p>The import and include will magically generate classes like:</p>
  
  <pre><code>.icons-application_go {
    background-position: 0 -16px;
  }
  </code></pre>
  
  <p>(which corresponds to icons/application_go.png file)</p>
  
  <p>However, I need to include my sprites so that the resulting classes looks like this</p>
  
  <pre><code>.x-btn-icon.icons-application_go {
    background-position: 0 -16px;
  }
  
  .x-btn-icon.icons-delete {
    background-position: 0 0;
  }
  </code></pre>
  
  <p>I've tried to do</p>
  
  <pre><code>.x-btn-icon {
    @include all-icons-sprites;
  }
  </code></pre>
  
  <p>but it will result in</p>
  
  <pre><code>.x-btn-icon .icons-application_go {
    background-position: 0 -16px;
  }
  
  .x-btn-icon .icons-delete {
    background-position: 0 0;
  }
  </code></pre>
  
  <p>,so selecting childs of .x-btn-icon but not elements with class="x-btn-icon icons-delete"</p>
  
  <p>Right now, I have</p>
  
  <pre><code>.x-btn-icon.icons-add { @include icons-sprite(add); }
  </code></pre>
  
  <p>in my SASS. But I would need to do this manually for every item. I have exactly 1000 icons in this set, so this would be tedious :-)</p>
  
  <p>Is there a way to loop through all icons name (like "add") and output </p>
  
  <pre><code>.x-btn-icon.icons-$foo { @include icons-sprite($foo); }
  </code></pre>
  
  <p>?</p>
  
  <p>As per suggestion from @cram1010, I've also tried</p>
  
  <pre><code>@import "icons/*.png";
  $icons-sprite-base-class: "&amp;.icons-";
  
  .x-btn-icon {
    @include all-icons-sprites;
  }
  </code></pre>
  
  <p>But I got the following error:</p>
  
  <pre><code>Invalid CSS after "": expected selector, was "&amp;.icons-"
    (in /Users/pasc/projects/bss-io-demo/vendor/gems/bss-io-app/app/assets/stylesheets/bss.io.app.css.scss)
  </code></pre>