Css 在SASS中，创建选择器时如何避免插值前的空格？ 我已经做了什么

我使用sprite图像，并且有一个SASS规则，它是这样为所有这些类分配一组属性（实际上是一个mixin）：

.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

，它带有参数，用于插入为每个类计算的

背景位置

属性。比如：

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

我想做什么 现在，新的要求是，当这些类中的任何一个应用于

元素时，我需要覆盖

margin right

属性，因此我考虑将所有选择器保存在一个字符串变量中：

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

元素的后代，而不是它的一部分

有人知道如何避免插值来增加额外的空间，这会弄乱我的代码吗？。谢谢

---更新--- 解决方案 感谢您的回答，我想出了一个解决方案，使用：

前面的代码不输出任何内容，直到我在

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

现在一切都好了。：）

更多信息 以防万一你想知道我的混合器是干什么的，给你。我的sprite image

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

---

我曾经编译过我所有的SCSS文件。

这是一个很好的扩展base的用例

---

我从未听说过这些

占位符选择器。我会给他们一次机会，让你知道它是如何运作的。它起作用了！但是，我使用字符串变量一次生成所有类，而不是单独扩展每个类。我会用你的答案更新我的问题。非常感谢。
// '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;
}

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

// ...