Subtract from a value obtained through variable interpolation - css

Question

I'm having trouble calculating a value when using variable interpolation.
Here's an example on the Less preview site: http://goo.gl/GVHXUs
Below is my code:
#breakpoint-sm: 600px;
#breakpoint-md: 800px;
.Mq(#breakpoint; #rules; #maxMin: min) {
& when (#maxMin = min) {
#query: ~"(min-width: #{breakpoint-#{breakpoint}})";
#media screen and #query {#rules();};
}
& when not (#maxMin = min) {
#break: ~"#{breakpoint-#{breakpoint}}" - 1;
#query: ~"(max-width: #{break})";
#media screen and #query {#rules();};
}
}
.test {
.Mq(sm; {
width: 100%;
height: 200px
}; max);
.Mq(md; {
width: 100%;
height: 200px
});
}
Result:
#media screen and (max-width: 600px - 1) {
.test {
width: 100%;
height: 200px;
}
}
#media screen and (min-width: 800px) {
.test {
width: 100%;
height: 200px;
}
}
So what I'm trying to achieve is that when something other than min is passed to the #maxMin it should subtract 1 from the breakpoint. I guess I'll be the laughing stock of Stackoverflow now, but hell, I can't figure it out.

Answer 1

The output of ~"#{breakpoint-#{breakpoint}}" is always a string and so the compiler just appends the number to the string instead of performing the math operation.
One way would be to use a temporary variable like shown below (have added only the part that needs modification) and then perform the arithmetic operation.
.Mq(#breakpoint; #rules; #maxMin: min) {
/* the rest of the mixin */
& when not (#maxMin = min) {
#temp: ~"breakpoint-#{breakpoint}";
#break: (##temp - 1); /* the braces are mandatory, without which it again appends */
#query: ~"(max-width: #{break})";
#media screen and #query {#rules();};
}
}
/* the selector blocks and mixin calls */
Below are few things that I found while working on the solution which have left me stumped. I'm trying to find the reason and will update the answer when I do find it out.
The braces play an important role in the #break variable. Without it, the output in media query is still a concatenation. However, if the same variable is used outside the media query (in a normal property-value pair like prop: #break, it prints the subtracted value).
The below code returns concatenated value (800px - 1)
#break: ~"#{breakpoint-#{breakpoint}}" - 1;
prop: #break;
whereas the below gives a "Operation on invalid type" compiler error.
#break: ~"#{breakpoint-#{breakpoint}}";
prop: #break - 1;
while I can see the reason behind them (first one results in string concatenation whereas second says subtraction can't happen on a string value), I am a bit stumped as to why the behavior is not consistent between the two.
(You are definitely not a laughing stock. Though I knew the reason for the problem, it took time for me to find a solution.)