Не работает @mixin в scss?

Question

[eldgammel]

Не могу понять, почему переменные которые я передаю в скобках не влияют на размер .button; Из миксина получаю только цвет

@mixin button-color ($height, $width) {

    @if (($height < $width) and ($width >= 35px)) {
        background-color: blue;    
    } @else {
        background-color: green;
    }
}

.button {
    @include button-color(100px, 200px); // работает только логика
}

Comments

[Вадим]

1) Вы нарушаете правило 3.9 https://qna.habr.com/help/rules
2) Я может чего-то не понимаю, но зачем Вы в миксин передаёте $height: 10px, а не просто 10?

[eldgammel]

Вадим,
1) я использовал тег img, нарушения тут нет
2) изначально я передавал просто 10 - не работает, это уже потом кучу экспериментов провел, чтобы заработало, но увы

[Вадим]

eldgammel, Если кто-то говорит, что Вы нарушаете правила, значит не спроста, как считаете? Да, опечатался. Поднимите глазки на предыдущий пункт. 3.8

[Вадим]

eldgammel,
Вот рабочий вариант

@mixin sc($h, $w) {
  @if $h<$w {
   color: green; 
  } @else {
    color: red; 
  }
}

span {
  @include sc(20, 10);
}

Цвет соответственно будет либо красный либо зелёный.

[Ankhena]

eldgammel, а какими по вашему строчками вы говорите ему что ширина должна быть такая-то, а высота такая-то?

[Вадим]

Ankhena, никакими. Как я и сказал, в первом комментарии, что, видимо, чего-то я не понимаю. В данном случае что автору нужно. На вопрос автор разъяснений не дал, лишь сказал что это результат его испытаний.

[Ankhena]

Вадим, ой, извините, не вас хотела тегнуть, конечно.

[eldgammel]

Вадим, окей, как сделать чтобы он понял, что $height - относится к свойству height (так же с width)?

[Вадим]

eldgammel, то есть чтобы в миксин передавались текущие значения ширины и высоты элемента?

[eldgammel]

решил сам

Answer 1

[eldgammel]

К сожалению в комментах не смогли ответить
Ниже ответ

@mixin button-color ($height, $width) {

    height: $height; // вот в чем соль
    width: $width;  // вот в чем соль

    @if (($height < $width) and ($width >= 35px)) {
        background-color: blue;    
    } @else {
        background-color: green;
    }
}

.button {
    @include button-color(100px, 200px); // работает только логика
}

Comments

[Сергей delphinpro]

хм... а Ankhena о чем вам сказала ?
Как раз об этом — вы задаёте только цвет, и удивляетесь, что назначается только цвет.