Question

我有一个问题，我正在努力。我有这个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职业选手的解决方法（或者不是职业选手，但比我更聪明）？感谢大家的关注和分享您的解决方案。

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

最后的＆符号（＆amp;）和SASS中的选择器的一部分

1 个答案: