Conditionally setting one variable's value based on another
See Mixin Guards and Ruleset Guards (aka "CSS Guards") for when
usage examples. Since you need to define a variable you'll have to use mixin-based condition (rulesets do not expose their variables to an outer scope). E.g.:
.-();
.-() when (@side = right) {
@sideOpposite: left;
}
.-() when (@side = left) {
@sideOpposite: right;
}
(Use any suitable mixin name instead of .-
, e.g. .define-opposite-side
).
And with Argument Pattern Matching it can be further simplified just to:
.-(@side);
.-(left) {@sideOpposite: right}
.-(right) {@sideOpposite: left}