css - 在 SASS 中，如何在创建选择器时避免插值前的空格？

Question

我已经做了什么

我使用 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用参数插入 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 的元素属性，所以我想将所有选择器保存在一个字符串变量中:

// 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 answer 我想出了一个使用 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 做了什么，它们就在这里。我的 Sprite 图像 $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