更少:如何编写:hover和:focus [英] Less: how to write :hover and :focus

问题描述

我刚刚开始学习Less，并希望得到这样的结果:

I just started learning Less and would like to have an outcome like this:

.navbar .nav > li > a {
   /* some rules */
} 

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

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

我不知道如何在Less中写出来.我尝试过

I can't figure out how to write that in Less. I tried

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

    }
    &:focus {

    }
}

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

but that doesn't work. Please help. Thank you.

推荐答案

这本质上是嵌套的正确格式，但是并不清楚您期望什么.也许您希望将/* some rules */的重复复制到:hover和:focus中(仅基于上面显示的输入和输出内容- )，否则对您的问题的正确理解，请进行澄清 ).但是，这不是嵌套的工作方式.嵌套仅拾取选择器字符串以将伪类附加到其上，它不会自动将其插入中填充在其外部中定义的规则.您需要像以下选项之一一样更加明确:

That is the essentially the correct format for nesting, but it is a little unclear what you are expecting. Perhaps you are expecting duplication of the /* some rules */ into the :hover and :focus (just based on what you show above for input and output--if that is not a correct understanding of your issue, please clarify). However, that is not how nesting works. Nesting only picks up the selector string to attach the pseudo class to, it does not populate the rules defined outside of it automatically into it. You need to be more explicit like one of these options:

选项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();
    }
}

这篇关于更少:如何编写:hover和:focus的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！