title: In SASS, how to avoid space before interpolation when creating a selector?
body: <h2>What I've already done</h2>
  
  <p>I use sprite images and have a SASS rule that goes like this to assign a bunch of properties (a mixin actually) to all these classes:</p>
  
  <pre><code>.success-16, .error-16, .warning-16, .info-16, 
  .user-16, .plus-16, .logout-16, .star-16, .question-16, 
  .document-16, .save-16, .cancel-16, .email-16, .search-16
  {
      @include sprite(16, 'img/Sprites16.png');
      // This @include inserts a bunch of properties common to all classes
  }
  </code></pre>
  
  <p>And then I have another <code>@include</code> with arguments to insert the <code>background-position</code> property calculated for each class. Something like:</p>
  
  <pre><code>.success-16
  {
      @include spritePosition(16, 2, 1);
  }
  
  .error-16
  {
      @include spritePosition(16, 3, 1);
  }
  
  // ... and so on.
  </code></pre>
  
  <p>This code outputs a CSS like this:</p>
  
  <pre><code>.success-16, .error-16, .warning-16, .info-16, 
  .user-16, .plus-16, .logout-16, .star-16, .question-16, 
  .document-16, .save-16, .cancel-16, .email-16, .search-16
  {
      display: inline-block;
      width: 16px; 
      height: 16px;
      background: url(img/Sprites16.png) no-repeat 0 0;
      /* ...and more rules */
  }
  
  .success-16 { background-position: -16px 0px; }
  
  .error-16 { background-position: -32px 0px; }
  </code></pre>
  
  <h2>What I want to do</h2>
  
  <p>Now, the new requirement is when any of these classes is applied to an <code>&lt;img&gt;</code> element I need to overwrite the <code>margin-right</code> property, so I thought of saving all my selectors in a string variable:</p>
  
  <pre><code>// This variable holds all my selectors
  $All_selectors: '.success-16, .error-16, .warning-16, .info-16, 
  .user-16, .plus-16, .logout-16, .star-16, .question-16, 
  .document-16, .save-16, .cancel-16, .email-16, .search-16';
  </code></pre>
  
  <p>and then use interpolation to create the new rule referencing the parent selector:</p>
  
  <pre><code>img
  {
      &amp;#{$All_selectors}
      {
          margin-right: 0;
      }
  }
  </code></pre>
  
  <p>This code produces the following CSS output:</p>
  
  <pre><code>img.success-16, img .error-16, img .warning-16, img .info-16, img .user-16, 
  img .plus-16, img .logout-16, img .star-16, img .question-16, img .document-16, 
  img .save-16, img .cancel-16, img .email-16, img .search-16
  {
      margin-right: 0;
  }
  </code></pre>
  
  <p>This turns out to work, but only for the first selector in the variable string. <strong>Notice how the interpolation adds a space between the <code>img</code> and the class name for the rest of the selectors</strong>.</p>
  
  <p>I have already tried to remove the spaces in the <code>$All_Selectors</code> string variable, but this does nothing, the spaces appear there anyway.</p>
  
  <h2>The question</h2>
  
  <p>As you know, the space in between makes the rule to fail, as it is interpreted as the class being a descendant of the <code>img</code> element, and not part of it.</p>
  
  <p>Does anyone has any idea how to avoid interpolation to add this extra space that messes up my code?. Thanks.</p>
  
  <h1>--- UPDATE ---</h1>
  
  <h2>The solution</h2>
  
  <p>Thanks to <a href="https://stackoverflow.com/users/344543/russ-ferri">Russ Ferri</a> answer I came up with a solution using <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholders" rel="nofollow noreferrer">placeholder selectors</a>:</p>
  
  <pre><code>img%iconsPH // %iconsPH is just a placeholder that will be replaced with the selectors that use the "@extend %iconsPH" instruction.
  {
      margin-right: 0;
  }
  </code></pre>
  
  <p>The previous code outputs nothing, until I use it in an <code>@extend</code> instruction:</p>
  
  <pre><code>#{$All_selectors}
  {
      @extend %iconsPH;
  }
  </code></pre>
  
  <p>This code outputs what I was looking for:</p>
  
  <pre><code>img.success-16, img.error-16, img.warning-16, img.info-16, img.user-16, 
  img.plus-16, img.logout-16, img.star-16, img.question-16, img.document-16, 
  img.save-16, img.cancel-16, img.email-16, img.search-16
  {
      margin-right: 0;
  }
  </code></pre>
  
  <p>Everything works now. :)</p>
  
  <h2>More info</h2>
  
  <p>Just in case you were wondering what my mixins do, here they are. My sprite image <code>$file</code> is a grid of icons, and I use rows and columns in it to calculate each image position. I use the same mixin for icon grids of a different size.</p>
  
  <pre><code>// 'sprite' mixin groups all the properties to be applied to a sprite class.
  @mixin sprite($size, $file)
  {
      display: inline-block;
      vertical-align: text-bottom;
      width: $size + px;
      height: $size + px;
      overflow: hidden;
      text-indent: $size * 2 + px;
      white-space: nowrap;
      background: url($file) no-repeat 0 0;
      position: relative;
      margin-right: 5px;
  }
  
  // 'spritePosition' adds the background-position property with calculated values upon the icon size and the icon position within the sprite image.
  @mixin spritePosition($size, $col, $row)
  {
      background-position: -($size * ($col - 1)) + px + ' ' + -($size * ($row - 1)) + px;
  }
  </code></pre>
  
  <p>I used <a href="http://visualstudiogallery.msdn.microsoft.com/2b96d16a-c986-4501-8f97-8008f9db141a" rel="nofollow noreferrer">Mindscape Web Workbench VS extension</a> to compile all my SCSS files.</p>