Question

我创建了两个mixin，它们为我后面要在标题背景网址中使用的同一个变量指定了不同的值。

取决于html类变量$image-name应该是不同的，因为我包含不同的mixin但它总是有"second-img"值，即使我的html中不存在类.second。 / p>

如果有更好的方法，请告诉我。谢谢！

@mixin first-image($image) {
    $image-name: $image !global;
}

@mixin second-image($image) {
    $image-name: $image !global;
}

html.first {
    @include first-image("first-img");
}

html.second {
    @include second-image("second-img");
}

header {
    background-image: url(../images/#{$image-name}-banner.jpg);
}

Answer 1

执行时的代码如下所示：

html.second {
    second-img {
        $image-name: second-img !global;
    }
}

你的混音是你在@include中定义的$ image的值，因为它们具有相同的变量名。

@mixin second-image($image) {
    $image-name: $image !global;
}

将变量名称更改为其他名称，它将不会显示相同的内容：

@mixin second-image($image) {
    $image-name: $thingy !global;
}

即使类不存在，也包括SASS mixin

1 个答案: