首页 文章

最后的&符号(&)和SASS中的选择器的一部分

提问于
浏览
2

我有一个问题,我正在努力 . 我有这个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 回答

  • 10

    对于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;
        }
    }
    

相关问题