Css 更改菜单的背景色以使用SASS和twig显示活动页面

好的，我的问题相对简单，我确信我已经非常接近解决它了，但我就是看不到解决方案。我正在开发一个使用十月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>

.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);
}

这将被编译为以下内容：

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

.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>

---

然而，它仍然不起作用。我所拥有的只是标准背景，“活动”类似乎没有被浏览器选中。

您需要将

&

添加到这些选择器中：

&.normal

和

&.active

（类似于

&:hover

）

您当前的使用是将

.normal

和

.active

视为子元素（应用于

.left menu

中具有这些类的任何子元素），而实际上是在寻找同时具有

.left menu

和

类的元素


旁注：

您可能可以取消
.normal
类，只需将这些样式直接添加到
.left nav
，因为
后台
将被
&.active
和
&:hover
覆盖

如果样式相同，也可以组合这两个选择器：

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

最后，如果可能的话，我可能会建议将这些样式应用到
（与生孩子
）中。
我按照你的建议做了，但我仍然无法让它起作用。查看我的编辑以了解详细信息。您的代码输出似乎正常，请尝试此处：-可能有其他内容正在覆盖样式？@Osuwariboy，我还更新了上面的内容，以显示您可以组合这两个选择器。好的，显然，将类移动到
标记解决了我的问题。我还按照建议将两个选择器组合在一起，事情开始按预期进行。感谢您的帮助：）您最好使用javascript来确定活动页面。确定活动页面不是问题所在。我很难让CSS规则正常工作。