我刚开始学习Less并希望得到这样的结果：
.navbar .nav > li > a {
/* some rules */
}
.navbar .nav > li > a:hover {
/* some rules */
}
.navbar .nav > li > a:focus {
/* some rules */
}
我无法弄清楚如何在Less中写出来。我试过了
.navbar .nav > li > a {
/* some rules */
&:hover {
}
&:focus {
}
}
但这不起作用。请帮忙。谢谢。
解决方法
这基本上是嵌套的正确格式，但有点不清楚你期望的是什么。也许你期望将/ *某些规则* /重复到：hover和：focus(仅基于你在输入和输出上面显示的内容 – 如果这不是对你的问题的正确理解，请澄清)。但是，这不是嵌套的工作原理。嵌套仅拾取选择器字符串以将伪类附加到其中，它不会自动将其外部定义的规则填充到其中。您需要更明确地像以下选项之一：
选项1(使用嵌套)
.navbar .nav > li > a {
/* some rules */
&:hover {
/* some rules */
}
&:focus {
/* some rules */
}
}
选项2(就像CSS一样)
.navbar .nav > li > a,.navbar .nav > li > a:hover,.navbar .nav > li > a:focus {
/* some rules */
}
选项3(使用与mixin嵌套)
.setRules() {
/* some rules you type once */
}
.navbar .nav > li > a {
.setRules();
&:hover {
.setRules();
}
&:focus {
.setRules();
}
}
