CSS 有没有办法在 Less 中为 ~ 操作符使用变量，比如 ~"calc(100% - @spacing)";
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14279328/
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
Is there a way to use variables in Less for the ~ operator, like ~"calc(100% - @spacing)";
提问by patricjansson
Is there a way to use variables in less ~operator, like
有没有办法在 less~运算符中使用变量，比如
~"calc(70% - @spacing)";
When I have tried it it only works with static values like
当我尝试过它时，它只适用于静态值，例如
~"calc(70% - 10px)";
Can I get the string to be evaluated prior to beeing set as a property.
我可以在设置为属性之前获取要评估的字符串吗？
回答by Christoph
To disable the calculation which LESS does automatically when discovering a -between two numeric values but still being able to use variables, you can write one of the following:
要禁用 LESS 在发现-两个数值之间的a但仍然能够使用变量时自动执行的计算，您可以编写以下内容之一：
1) Only escape the operator that triggers the calculation and use the variable like you normally do
1）只转义触发计算的运算符并像往常一样使用变量
@padding: 20px;
body {
padding: calc(100% ~"-" @padding);
}
2) Escape the whole expression and interpolate the variable with the @{padding}notation
2) 转义整个表达式并用@{padding}符号插入变量
@padding: 20px;
body {
padding: ~"calc(100% - @{padding})";
}
I prefer the second version, since it resembles javascript's template literalsand looks a bit cleaner, but either way works just fine.
我更喜欢第二个版本，因为它类似于javascript 的模板文字并且看起来更简洁，但无论哪种方式都可以正常工作。
Both solutions disable the automatic Less calculation and compile to the correct result:
两种解决方案都禁用自动 Less 计算并编译为正确的结果：
body {
padding: calc(100% - 20px);
}
