Измените цвет фона меню, чтобы показать активную страницу, используя SASS и веточку

Question

Хорошо, так что мой вопрос относительно прост, и я уверен, что я очень близок к его решению, но я просто не вижу решения. Я разрабатываю веб-сайт с помощью October CMS и использую SASS для работы с различными стилями CSS. То, что я пытаюсь сделать здесь, это в основном сделать меню, визуально показывающее мне, на какой странице, изменяя цвет фона. Вот что у меня в файле SCSS:

.left-menu{

        height: 30px;
        width: 186px;
        letter-spacing: 1px;
        font-size: 18px;
        font-weight: 300;
        color: white;
        line-height: 30px;
        text-align: center;

        .normal {
            background: #f47321;
            background: linear-gradient(135deg, transparent 21px, #f47321 0);
        }

        .active {
            background: #f68b1f;
            background: linear-gradient(135deg, transparent 21px, #f68b1f 0);
        }

        &:hover{
            background: #f68b1f;
            background: linear-gradient(135deg, transparent 21px, #f68b1f 0);
        }
    }

И на моей веб-странице есть следующее:

<a href="/"><div class="{{ (page == 'accueil') ? 'left-menu active' : 'left-menu normal' }} ">ACCUEIL</div></a>

Я хотел бы отметить, что условие ветки работает, и когда я нахожусь на странице "accueil", я получаю часть "left-menu active", отображаемую в атрибуте класса, и "left- меню нормальное "класс, когда я на другой странице.

Моя проблема в том, что это не работает. По какой-то причине «активная» и «нормальная» части не поднимаются. Однако «зависание» работает отлично. Кто-нибудь знает, что я делаю не так?

РЕДАКТИРОВАТЬ: В ответ на joknawe я сделал следующие изменения в моем коде (добавив амперсанд и избавившись от "нормального" стиля):

.left-menu{

        height: 30px;
        width: 186px;
        letter-spacing: 1px;
        font-size: 18px;
        font-weight: 300;
        color: white;
        line-height: 30px;
        text-align: center;
        background: #f47321;
        background: linear-gradient(135deg, transparent 21px, #f47321 0);

        &.active {
            background: #f68b1f;
            background: linear-gradient(135deg, transparent 21px, #f68b1f 0);
        }

        &:hover{
            background: #f68b1f;
            background: linear-gradient(135deg, transparent 21px, #f68b1f 0);
        }
    }

Это компилируется в следующее:

.left-menu {
  height: 30px;
  width: 186px;
  letter-spacing: 1px;
  font-size: 18px;
  font-weight: 300;
  color: white;
  line-height: 30px;
  text-align: center;
  background: #f47321;
  background: linear-gradient(135deg, transparent 21px, #f47321 0);
}

.left-menu.active  {
  background: #f68b1f;
  background: linear-gradient(135deg, transparent 21px, #f68b1f 0);
}

Затем, на html-странице, у меня есть полученный код:

<a href="/"><div class="left-menu active ">ACCUEIL</div></a>

Однако, это все еще не работает. Все, что у меня есть, это стандартный фон, «активный» класс, похоже, не улавливается браузером.

Answer 1

Вам нужно будет добавить & к этим селекторам: &.normal и &.active (аналогично &:hover)

Ваше текущее использование рассматривает .normal и .active как дочерние элементы (применяя к любому дочернему элементу .left-menu, в котором есть эти классы), когда вы на самом деле ищете элемент, который имеет и .left-menu, и * 1011. * (или .active) классы.

https://css -tricks.com / заместитель дерзость-амперсанд /

Примечание: :

Возможно, вы могли бы покончить с классом .normal и просто добавить эти стили непосредственно к .left-nav, поскольку background будет переопределено с &.active и &:hover.

Вы также можете объединить эти 2 селектора, если стили будут одинаковыми:

&.active, &:hover {
  background: #f68b1f;
  background: linear-gradient(135deg, transparent 21px, #f68b1f 0);
}

Наконец, я бы, вероятно, предложил перенести эти стили для применения к <a> (вместо того, чтобы иметь ребенка <div>), если это возможно.