如何使用SASS使用菜单项

Question

我正在创建菜单项，它们的类名分别为l1和l2，并且希望为每个项目提供不同的背景颜色。从而获得所需的背景颜色在CSS文件我得写我这样的代码的每个项目：

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

在萨斯我想使用嵌套特性，写我的代码是这样的：

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