如何编写:hover和:focus：Less

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 {

    }
}

但那并不起作用。请帮忙。谢谢。

- Pelangi

---

那是正确的做法。 - Samuel Liew

如果它不起作用，那你会得到什么？ - Musa

它运行得非常好。http://www.dopefly.com/less-converter/less-converter.html - Matt Ball

尝试详细阐述，而不仅仅是说“那行不通”。 - icedwater

Answer 1

这基本上是嵌套的正确格式，但不太清楚您的期望。也许您期望将 /* some rules */ 复制到: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();
    }
}

- ScottS

---

我对LESS不太熟悉，但我认为选项2和3更好，因为它们可以最小化重复。 - icedwater

我完全同意，我选择选项1是因为它更符合他最初的问题格式。如果我正确理解了问题，选项2或3将是减少代码重复的最佳选择。 - ScottS

感谢您的反馈。很抱歉我没有先澄清我使用Less javascript来进行即时转换。并且我没有得到:hover和:focus的任何输出。@ScottS，我不需要重复规则，因为我知道它会被继承。Matt Ball，我尝试了您建议的转换器，并且得到了正确的输出结果。这是否意味着在JavaScript的即时转换中存在问题？ - Pelangi

有时会针对 :hover 等设置规则，以便不会覆盖您想要保留的 <a> 元素上的其他 :hover 规则，因此我不确定这是否是您的意图。然而，听起来您的 javascript 对“转换”正在处理的问题。您可能希望澄清此问题或提出另一个更详细地处理您面临的问题的问题。 - ScottS