Can I apply a :hover pseudo selector with the LESS css markup?

Question

In LESS I can apply two rules like this to affect text styling of links to hide underline unless hovered:

.read-more {     a     {         text-decoration:none;     }     a:hover     {         text-decoration:hover;     } } 

But I feel like I should also be able to define two rules like this:

.reverseHover {     text-decoration:none; }  .reverseHover:hover {     text-decoration:hover; } 

And then use a mixin to get both rules:

.read-more{     a     {         .reverseHover;     } } 

Without having to explicitly do something like this:

.read-more{     a{         .reverseHover;     }     a.reverseHover:hover     {         .reverseHover;     } } 

Is that possible?

Answer 1

You can reference the parent selector using &. You can even use a parent selector in a mixin. Documentation is found at lesscss.org. Below is the solution.

.reverseHover {     text-decoration:none;     &:hover { text-decoration:underline; } } .read-more {     a     {         .reverseHover     } }