如何将像素宽度值与 LESS Css 相乘？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8736757/
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
How can I have multiply a pixel width value with LESS Css?
提问by cwd
I am trying to set up padding on some \ elements styled as pills, and I want to dynamically change the padding. I know I can do:
我正在尝试在一些样式为药丸的 \ 元素上设置填充，并且我想动态更改填充。我知道我可以做到：
@pill-padding-v: 8px;
@pill-padding-h: 15px;
padding:@pill-padding-v @pill-padding-h;
that renders this - and seems to work fine:
呈现这个 - 并且似乎工作正常：
padding:8px 15px;
But how can I have LESS add 1px of padding to that?
但是我怎样才能让 LESS 添加 1px 的填充呢？
@pill-padding-v: 8;
@pill-padding-h: 15;
@pill-padding-v: (@pill-padding-v + 1)
@pill-padding-h: (@pill-padding-h + 1)
padding:@pill-padding-vpx @pill-padding-hpx;
The main probelem seems to be adding "px" as part of the variable name I'm getting a compile error. Also I think it is syntactically incorrect to use 8 pxinstead of 8pxand that seems to break in browsers, too.
主要问题似乎是将“px”添加为变量名的一部分，我收到了编译错误。另外我认为使用8 px而不是在语法上是不正确的，8px而且这似乎在浏览器中也有问题。
How can I have multiply a pixel width value with LESS Css?
如何将像素宽度值与 LESS Css 相乘？
回答by Wesley Murch
You're right that adding the pxto the variable is causing problems. I actually tried the interpolation syntax and it didn't help, but you should be specifying units anyways in your variables (px, em, %...), like in your first working example.
您是对的，将px加到变量中会导致问题。我实际上尝试了插值语法，但没有帮助，但是您应该在变量（px, em, %...）中指定单位，就像在您的第一个工作示例中一样。
You said "multiply" but I think you meant "add". There shouldn't be any problem, try this:
你说的是“乘”，但我认为你的意思是“加”。应该没有问题，试试这个：
@pill-padding-v: 8px;
@pill-padding-h: 15px;
@pill-padding-v: (@pill-padding-v + 1);
@pill-padding-h: (@pill-padding-h + 1);
element {
padding:@pill-padding-v @pill-padding-h;
}
Output should be:
输出应该是：
element { padding:9px 16px; }
...although, you might want to just use another variable name or add the 1px right in the style declaration. I don't think re-declaring variables is good practice, and was actually surprised it worked.
...虽然，您可能只想使用另一个变量名称或在样式声明中添加 1px。我不认为重新声明变量是好的做法，实际上很惊讶它的工作原理。
回答by itsmikem
Aside from add, you can perform any mathematical calculation using LESS this way:
除了添加之外，您还可以通过以下方式使用 LESS 执行任何数学计算：
@pill-padding-v: 8;
@pill-padding-h: 15;
element {
/* the numbers I'm multiplying by are arbitrary,
but the value defined in the LESS variable will append
the unit that you multiply it by. */
padding: calc(@pill-padding-v * 3px) calc(@pill-padding-h * 2px);
}
LESS outputs:
更少的输出：
element {
padding:calc(24px) calc(30px);
}
Even though it's wrapped in the calc function, it's fine, because the result of the "equation" with no math operator, is that value anyway.
即使它包含在 calc 函数中，也没关系，因为没有数学运算符的“方程”的结果无论如何都是那个值。
User seven-phases-max offers a good point:you don't need the calc()function in the LESS. It can be written in LESS as:
用户七阶段最大提供了一个很好的观点：您不需要calc()LESS 中的功能。可以用 LESS 写成：
element {
padding: (@pill-padding-v * 3px) (@pill-padding-h * 2px);
}
