SASS Mixin включен, хотя класс не существует

Question

Я создал два миксина, которые присваивают разные значения одной и той же переменной, которую я хочу использовать позже в фоновом URL заголовка.

В зависимости от переменной класса html $image-name должно отличаться, поскольку я включаю разные миксины, но она всегда имеет значение "second-img", хотя класс .second не существует в моем html.

Пожалуйста, дайте мне знать, если есть лучший способ сделать это. Спасибо!

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

Ваше микширование использует значение $ image, которое вы определили во время @include, поскольку они имеют одинаковые имена переменных.

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

Измените имя переменной на другое, и оно не будет отображаться так же:

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