Conditionally setting one variable's value based on another

Question

I\'ve got a Less variable called @side. What I want is to set the variable @sideOpposite depending on the value of the @side variable.

Answer 1

You can take help of the mixin guard feature to allow conditional mixins

.mixin (@side; @sideOpposite) when (@side = right) { @sideOpposite: left }
.mixin (@side; @sideOpposite) when (@side = left) { @sideOpposite: right }

Answer 2

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}

Answer 3

I don't know if I've understand what you want to do, but from what I get about your question, you can do this with a mixin. See example

//This is the mixin with default value
.side(@leftORoposite: left) { float: @leftORoposite ;} 

Invoke this mixin when you need it left with .side(left) or when you need right with .side(right).