减：如何写：悬停和：焦点

Question

我刚开始学习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 {

    }
}

但这不起作用。请帮忙。谢谢。

Answer 1

这实际上是嵌套的正确格式，但有点不清楚你的期望。也许您期望/* some rules */和:hover的{​​{1>} 重复（仅基于您在输入和输出上显示的内容 - <如果这不能正确理解您的问题，请澄清 ）。但是，这不是嵌套的工作原理。嵌套只拾取选择器字符串以附加伪类，它不会自动填充在外部定义的规则到它。您需要更明确地像以下选项之一：

选项1（使用嵌套）

:focus

选项2（就像CSS一样）

.navbar .nav > li > a {
    /* some rules */
    &:hover {
      /* some rules */
    }
    &:focus {
      /* some rules */
    }
}

选项3（使用mixin嵌套）

.navbar .nav > li > a,
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
    /* some rules */
}