css - SASS 中选择器末尾的 & 符号 (&) 和选择器的一部分

Question

我有一个正在努力解决的问题。我有这个 mixin(这是将一些 less 移植到 sass 的尝试):

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

        .iThink .illNeverWork& {

            color: $pinkUnicornRainbow;
            ...
        }
  }

这显然是行不通的 :D我希望它生成如下内容:

.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: #123ABC;
    ...
}

mixin 在各种 div 类中被调用，因此不可能(很容易)将其设为静态。

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

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