Using LESS, how can I subtract values with "px" at the end of the variable. I have the following variable:
@bpMobile: 600px
What I want to do is subtract this by 1px
@media only screen and (max-width: @bpMobile - 1px ) {
}
How can I achieve this with LESS?
Sorry for answering this late, but I had this very problem and it seems LESS is picky about the spacing. You also need () around your calculation.
This will not work:
@media screen and (max-width: (@widthSmall-2)) { }
However, this will (notice the space between the variable and the digit):
@media screen and (max-width: (@widthSmall - 2)) { }
- can be a part of an identifier in CSS. E.g. we don't expect max-width to substract width from max. As for parens for @media query values - yes, they are required regardless of --strict-math option.You can always use the calc function for this.
Syntax:
calc(expression)
Eg:
abc {
width:calc(100%-20px)
}
Here are the list of browser that supports this function
EDIT 1:
you can use it in the following two ways:
LESS Input:
@bpMobile: 600px;
max-width: calc(~'@{bpMobile} - 1px');
CSS Output:
max-width: calc(600px - 1px);
2nd Way: Less Input:
@bpMobile: 600px;
max-width: calc(@bpMobile - 1px);
CSS Output :
max-width: calc(599px);
With the first option,the calc arguments are escaped in order to prevent them from being evaluated on compilation.The values will remain totally static until it's evaluated by the client.
With the second option, the calc value will be evaluated on compilation. And it would be the same as
max-width: @bpMobile - 1px;
which will result in
max-width: 599px;
height: 100vh - @someHeightInPx, where a runtime calc() (=readable in the css) is the only option…The fix from freejosh does not work for me on lesscss 1.7.0.
What does the trick is simply adding paranthesis around every variable or calculation inside a media-query:
@media only screen and (max-width: (@bpMobile - 1px) ) { ... }
or
@other: @bpMobile - 1px;
@media only screen and (max-width: (@other) ) { ... }
The problem isn't the math function, it's that you're trying to use it in a media query. The docs say that you need to make the whole query one variable:
@bpMobile: 600px;
@bpMobile1: @bpMobile - 1px;
@singleQuery: ~"only screen and (max-width: @{bpMobile1})";
@media @singleQuery {
}
————————————————————————————————
In my case .
.loop(@i) when (@i > 0) {
@index : @i + 1;
.abc_@{i}{
z-index : @index;
}
.loop(@i -1);
}
.loop(8);
will give output:
.abc_8{
z-index : 8 + 1;
}
————————————————————————————————
Another case :
.loop(@i) when (@i > 0) {
@index : pow(@i,1) + 1;
.abc_@{i}{
z-index : @index;
}
.loop(@i -1);
}
.loop(8);
will give output:
.abc_8{
z-index : 9;
}
