CSS LESS：从变量中减去
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17433849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
LESS: Subtract from variable
提问by cusejuice
Using LESS, how can I subtract values with "px" at the end of the variable. I have the following variable:
使用 LESS，如何减去变量末尾带有“px”的值。我有以下变量：
@bpMobile: 600px
What I want to do is subtract this by 1px
我想要做的是减去 1px
@media only screen and (max-width: @bpMobile - 1px ) {
}
How can I achieve this with LESS?
我怎样才能用 LESS 实现这一点？
回答by Coreus
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.
很抱歉这么晚才回答，但我遇到了这个问题，而且似乎 LESS 对间距很挑剔。您还需要()围绕您的计算。
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)) { }
回答by heretolearn
You can always use the calc functionfor this.
您始终可以calc function为此使用。
Syntax:
calc(expression)
句法：
calc(expression)
Eg:
例如：
abc {
width:calc(100%-20px)
}
Hereare the list of browser that supports this function
以下是支持此功能的浏览器列表
EDIT 1:
编辑 1：
you can use it in the following two ways:
您可以通过以下两种方式使用它：
LESS Input:
少输入：
@bpMobile: 600px;
max-width: calc(~'@{bpMobile} - 1px');
CSS Output:
CSS 输出：
max-width: calc(600px - 1px);
2nd Way: Less Input:
第二种方式：少输入：
@bpMobile: 600px;
max-width: calc(@bpMobile - 1px);
CSS Output :
CSS 输出：
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.
对于第一个选项，calc 参数被转义以防止它们在编译时被评估。这些值将保持完全静态，直到它被客户端评估。
With the second option, the calc value will be evaluated on compilation. And it would be the same as
使用第二个选项，将在编译时评估 calc 值。这将与
max-width: @bpMobile - 1px;
which will result in
这将导致
max-width: 599px;
回答by freejosh
The problem isn't the math function, it's that you're trying to use it in a media query. The docssay that you need to make the whole query one variable:
问题不在于数学函数，而在于您试图在媒体查询中使用它。文档说您需要使整个查询成为一个变量：
@bpMobile: 600px;
@bpMobile1: @bpMobile - 1px;
@singleQuery: ~"only screen and (max-width: @{bpMobile1})";
@media @singleQuery {
}
回答by Kai Moritz
The fix from freejosh does not work for me on lesscss 1.7.0.
freejosh 的修复在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) ) { ... }
回答by Lancer.Yan
————————————————————————————————
———————————————————————————————————
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;
}
