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