SASS 中选择器末尾的和号 (&) 是选择器的一部分答案

【问题标题】：Ampersand (&) at the end, and part of, a selector in SASSSASS 中选择器末尾的和号 (&) 是选择器的一部分
【发布时间】：2014-04-25 10:01:29
【问题描述】：

我遇到了一个我正在努力解决的问题。我有这个 mixin（这是尝试将一些更少的内容移植到 sass ）：

@mixin button-variant($color, $background, $border)
    {
        ...
        .foreverAlone{
            ...
        }

        .iThink .illNeverWork& {

            color: $pinkUnicornRainbow;
            ...
        }
  }

这显然不起作用：D 我希望它生成类似的东西：

.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: #123ABC;
    ...
}

mixin 在各种 div 类中被调用，因此不可能（很容易）使其成为静态的。

是否有一些 Sass 专业人士（或不是专业人士，但比我更聪明）的解决方法？感谢大家的关注和分享您的解决方案。

【问题讨论】：

标签： css sass porting ampersand

【解决方案1】：

对于 Sass 3.2 及更早的版本，这些是使用父选择器的所有有效方法：

.foo {
    &, &.bar, &#bar, &:after, &[active] {
        color: red;
    }
}

.foo {
    .bar & {
        color: red;
    }
}

从 Sass 3.3 开始，这是有效的：

.foo {
    &bar, &-bar {
        color: red;
    }
}

从 Sass 3.4 开始，这是有效的：

.foo {
    $foo: &;
    @at-root bar#{&} {
        color: red;
    }
}

【讨论】：