“Additive” property values with LESS mixin

问题

I'm looking for a feature that may or may not be available in LESS.

I have a mixin that adds a "glow" with box-shadow, which I use on various elements - buttons, inputs etc.

.glow() {
    box-shadow: 0 0 5px skyBlue;
}

What I'm looking for is a way to make the mixin add the box-shadow as a new comma-seperated value if the element already has a box-shadow.

So, I want this:

.button {
    box-shadow: inset 0 5px 10px black;
    .glow();
}

To compile to this:

.button {
    box-shadow: inset 0 5px 10px black, 0 0 5px skyBlue;
}

I think I recall seeing a similar feature in SASS, but I can't find it anywhere now.

Does this feature exist in LESS, or is there some alternative way to achieve a similar result?

回答1:

The feature you're looking for is merge. You'd do this:

.glow() {
    box-shadow+: 0 0 5px skyBlue;
}
.button {
    box-shadow+: inset 0 5px 10px black;
    .glow();
}

Note that both rulesets need to use the + syntax for it to work.

Or, you could declare the glow rule as a variable:

@glow: 0 0 5px skyBlue;

.button {
    box-shadow: inset 0 5px 10px black, @glow;
}

来源：https://stackoverflow.com/questions/30644529/additive-property-values-with-less-mixin