CSS 使用 CSS3 calc 进行不那么激进的编译
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11972084/
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 aggressive compilation with CSS3 calc
提问by Nick Babcock
The Lesscompilers that I'm using (OrangeBitsand dotless 1.3.0.5) are aggressively translating
我使用的Less编译器（OrangeBits和dotless 1.3.0.5）正在积极翻译
body { width: calc(100% - 250px - 1.5em); }
into
进入
body { width: calc(-151.5%); }
Which is obviously not desired. I'm wondering if there is a way to signal to the Less compiler to essentially ignore the attribute during compilation. I've searched through the Less documentation and both compilers' documentation, and I could not find anything.
这显然是不希望的。我想知道是否有办法向 Less 编译器发出信号，以便在编译期间基本上忽略该属性。我搜索了 Less 文档和两个编译器的文档，但找不到任何内容。
Does Less or a Less compiler support this?
Less 或 Less 编译器是否支持这一点？
If not, is there a CSS extender that does?
如果没有，是否有一个 CSS 扩展器呢？
回答by Luke Page
Less no longer evaluates expression inside calcby default since v3.00.
Less 不再calc默认计算内部表达式，因为v3.00.
Original answer (Less v1.x...2.x):
原答案（Less v1.x...2.x）：
Do this:
做这个：
body { width: calc(~"100% - 250px - 1.5em"); }
In Less 1.4.0 we will have a strictMathsoption which requires all Less calculations to be within brackets, so the calcwill work "out-of-the-box". This is an option since it is a major breaking change. Early betas of 1.4.0 had this option on by default. The release version has it off by default.
在 Less 1.4.0 中，我们将有一个strictMaths选项，要求所有 Less 计算都在括号内，因此calc它将“开箱即用”。这是一个选项，因为它是一个重大的突破性变化。默认情况下，1.4.0 的早期测试版启用了此选项。默认情况下，发布版本将其关闭。
回答by Sebastien Lorber
A very common usecase of calc is take 100% width and adding some margin around the element.
calc 的一个非常常见的用例是采用 100% 的宽度并在元素周围添加一些边距。
One can do so with:
可以这样做：
@someMarginVariable = 15px;
margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
回答by icl7126
There is several escaping options with same result:
有几个具有相同结果的转义选项：
body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }
回答by brohr
There's a tidier way to include variables inside the escaped calc, as explained in this post: CSS3 calc() function doesn't work with Less #974
有一种更简洁的方法可以在转义的 calc 中包含变量，如本文所述：CSS3 calc() 函数不适用于 Less #974
@variable: 2em;
body{ width: calc(~"100% - @{variable} * 2");}
By using the curly brackets you don't need to close and reopen the escaping quotes.
通过使用大括号，您无需关闭并重新打开转义引号。
