如何使用SASS使用菜单项

Question

我正在创建菜单项，其类名分别为l1，l2，并希望为每个项目提供不同的背景颜色。要获得CSS文件中每个项目所需的背景颜色，我必须编写如下代码：

.menu ul li.l1 {
  background: red;
}
.menu ul li.l2 {
  background: green;
}

在Sass中

我正在尝试使用嵌套属性并编写我的代码：

.menu {
  some properties
  ul li {
    some properties
    .l1 {
      background: red;
    }
  }
}

在编写上述代码时，我将关注CSS作为输出：

.menu ul li .l1 {
  background: red;
}

这不是我想要的背景。

哇我可以使用SASS访问我的菜单项吗？

Answer 1

您的.l1未正确宣布。

.menu {

  ul li {

    &.l1 {
      background: red;
    }
  }
}