Less: how to write :hover and :focus

Question

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 */
}

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.

Answer 1

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:

Option 1 (using nesting)

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

Option 2 (just like CSS)

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

Option 3 (using nesting with a mixin)

.setRules() {
    /* some rules you type once */
}

.navbar .nav > li > a {
    .setRules();
    &:hover {
      .setRules();
    }
    &:focus {
      .setRules();
    }
}