Миксина не видит переменную

Question

Столкнулся с ошибкой: миксина не видит переменную в внешнем окружении, куда была включена.

Пример вставки миксины:

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

Сама миксина:

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

Код ошибки:

Error: Undefined variable: "$color"

Answer 1

У вас переменная $color не является глобальной, либо вынесите обьявление переменной за правила селектора button.endBurger и других селекторов, чтобы переменная стала глобальной, либо передайте миксину аргумент

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

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

БЛОГ НА HUSL

Миксина не видит переменную

Ответы (1 шт):