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

Posted 2023-03-06

【中文标题】SASS 中选择器末尾的和号 (&) 是选择器的一部分

【英文标题】：Ampersand (&) at the end, and part of, a selector in SASS

【发布时间】：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 专业人士（或不是专业人士，但比我更聪明）的解决方法？ 感谢大家的关注和分享您的解决方案。

【参考方案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;