Почему CSS не влияет на элемент кнопки?

Question

У меня проблема со стилем элемента кнопки. Вот образец:

$clrWhite: #fff;
$clrPrimary: #3c9494;
.khanbank__button {
    display: block;
    height: 50px;
    border: none;
    color: $clrWhite;
    cursor: pointer;
    &--primary {
        background: $clrPrimary;
        &:hover {
            background: darken($clrPrimary, 5%);
        }
    } 
}

Вот что я пробовал:

Тест

Answer 1

Я вижу, вы используете БЭМ

Проблема связана с вашим HTML, поскольку к элементу необходимо применить оба класса

<button class="khanbank__button khanbank__button--primary">Test</button>

Answer 2

Из вашего Codepen вы написали:

<button class="khanbank__button--primary">Test</button>

Однако, если бы я перевел ваш SCSS в обычный CSS, он бы стал:

:root {
  --clrWhite: #fff;
  --clrPrimary: #3c9494;
  --clrPrimaryDarken: #358282;
}

.khanbank__button {
  display: block;
  height: 50px;
  border: none;
  color: var(--clrWhite);
  cursor: pointer;
}

.khanbank__button--primary {
  background: var(--clrPrimary);
}

.khanbank__button--primary:hover {
  background: var(--clrPrimaryDarken);
}

<button class="khanbank__button--primary">Test</button>

Возможно, теперь вы можете увидеть проблему.

В своем HTML вы применили только .khanbank__button--primary к <button>.Вам также необходимо применить базовый класс .khanbank__button к нему.

Короче говоря, ваш HTML должен быть:

<button class="khanbank__button khanbank__button--primary">Test</button>

См. эту ручку для рабочего примера.