Can I use an array of CSS psuedo-classes in a LESS mixin?

Question

I'm starting to use the LESS framework for styles in an app. I often have places in the app where I need to standardize pseudo-classes for an element to all be the same styles.

Rather than typing out

button:hover, button:active, button:hover:active { /*styles here */ }

I'm using LESS's nested styles to append those psuedo-classes like so:

.button {
 {
    &,
    &:hover,
    &:active,
    &:hover:active {
            border: 2px solid #000000
    }
}

That works perfectly fine and outputs button class with appended psuedo-classes.

My question is this: Can I take this even a step further to add the psuedo calls into a mixin and therefore call the mixin? I know this might seem like over-engineering, but I'm reusing this alot throughout several stylesheets and it would be great to be able to reuse one line of code with a mix in.

Answer 1

You can use functional mixins:

.button(@_arg) {
    &,
    &:hover,
    &:active,
    &:hover:active {
            border: @_arg;
    }
}

and then use it following way:

.example {
    .button(2px solid #000);
}