当前位置 : 主页 > 网页制作 > css >

css – 最后的&符号(&),以及SASS中选择器的一部分

来源:互联网 收集:自由互联 发布时间:2021-06-13
我有一个问题,我正在努力. 我有这个mixin(尝试将更少的东西移植到sass): @mixin button-variant($color, $background, $border) { ... .foreverAlone{ ... } .iThink .illNeverWork { color: $pinkUnicornRainbow; ... } } 这显然
我有一个问题,我正在努力.
我有这个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专业人员的解决方法(或者不是专业人士,但比我更聪明)?
感谢大家的关注和分享您的解决方案.

对于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;
    }
}
网友评论