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”页面时，最终在class属性中显示了“ 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和.normal（或.active）类。

https://css-tricks.com/the-sass-ampersand/

旁注：

您可能可以取消.normal类，而直接将这些样式添加到.left-nav中，因为background将被&.active和&:hover覆盖。

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

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

最后，如果可能的话，我可能建议将这些样式应用于<a>（相对于有一个孩子<div>）。

使用SASS和树枝更改菜单的背景颜色以显示活动页面

1 个答案: