在SASS中，如何在创建选择器时插入前避免空间？

Question

我已经完成了什么

我使用精灵图像并且有一个像这样的SASS规则来为所有这些类分配一堆属性（实际上是一个混合）：

.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
}

然后我有另一个带有参数的@include来插入为每个类计算的background-position属性。类似的东西：

.success-16
{
    @include spritePosition(16, 2, 1);
}

.error-16
{
    @include spritePosition(16, 3, 1);
}

// ... and so on.

此代码输出如下的CSS：

.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; }

我想做什么

现在，新的要求是当任何这些类应用于<img>元素时我需要覆盖margin-right属性，所以我想把所有选择器保存在字符串变量中： / p>

// 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';

然后使用插值创建引用父选择器的新规则：

img
{
    &#{$All_selectors}
    {
        margin-right: 0;
    }
}

此代码生成以下CSS输出：

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;
}

这结果有效，但仅适用于变量字符串中的第一个选择器。 请注意插值如何在img和其他选择器的类名之间添加空格。

我已经尝试删除$All_Selectors字符串变量中的空格，但这没有做任何事情，无论如何都会出现空格。

问题

如您所知，中间的空间使规则失败，因为它被解释为类是img元素的后代，而不是它的一部分。

有没有人知道如何避免插值来添加这个额外的空间来扰乱我的代码？感谢。

---更新---

解决方案

感谢Russ Ferri回答，我想出了一个使用placeholder selectors的解决方案：

img%iconsPH // %iconsPH is just a placeholder that will be replaced with the selectors that use the "@extend %iconsPH" instruction.
{
    margin-right: 0;
}

之前的代码没有输出任何内容，直到我在@extend指令中使用它：

#{$All_selectors}
{
    @extend %iconsPH;
}

此代码输出我要查找的内容：

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;
}

现在一切正常。 ：）

更多信息

万一你想知道我的mixins做了什么，这里就是。我的精灵图像$file是一个图标网格，我在其中使用行和列来计算每个图像位置。我将相同的mixin用于不同大小的图标网格。

// '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;
}

我使用Mindscape Web Workbench VS extension来编译我的所有SCSS文件。

Answer 1

这是扩展基础placeholder selector的一个很好的用例。

// Base rules for all sprites...
%sprite-16 {
    @include sprite(16, 'img/Sprites16.png');
}

img%sprite-16 {
    margin-right: 0;
}

// Rules for individual sprites...
.success-16 {
    @extend %sprite-16;
    @include spritePosition(16, 2, 1);
}

.error-16 {
    @extend %sprite-16;
    @include spritePosition(16, 3, 1);
}

// ...

example