Question

遇到错误：mixin在包含它的外部环境中看不到该变量。

插入mixin的示例：

button.endBurger {
    $color: rgba(247, 181, 82, $opacity-bg_conf); // variable that mixin does not see
    background-color: $color;
    width: 250px;
    @include hover-active_add-buts;
}

mixin：

@mixin hover-active_add-buts {
    &:hover {
        background: darken($color, $darken-k_add-buts);
    }
    &:active {
        background: darken($color, $darken-k-act_add-buts);
    }
}

错误代码：

错误：未定义的变量：“ $ color”

Answer 1

$color的范围不是全局的，您需要将其作为参数传递：

button.endBurger {
    $color: rgba(247, 181, 82, $opacity-bg_conf); // переменная, которую не видит миксина
    background-color: $color;
    width: 250px;
    @include hover-active_add-buts($color);
}

@mixin hover-active_add-buts($color) {
    &:hover {
        background: darken($color, $darken-k_add-buts);
    }
    &:active {
        background: darken($color, $darken-k-act_add-buts);
    }
}

Mixin没有看到变量

1 个答案: