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

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和:focus(只是根据你上面显示输入什么,output-- 如果这不是你的问题有正确的认识,请说明).但是,这不是嵌套的工作原理.嵌套仅拾取选择器字符串以将伪类附加到其中,它不会自动将其外部定义的规则填充到其中.您需要更明确地像以下选项之一:

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