如何减少某些样式的数学运算量? [英] How can I instruct less to ignore math for certain styles?

问题描述

我正在CSS中使用新的calc函数来获取对象的宽度，如下所示:

I'm using the new calc function in CSS to get the width for an object, as in:

width: calc(100% - 40px);

不幸的是，由于该文件位于LESS文件中，因此LESS在编译期间会有帮助"将其预先转换为60％.

Unfortunately, since this is in a LESS file, LESS is "helpfully" pre-converting this to 60% during compile time.

在calc函数中，我希望忽略数学，因为我需要浏览器进行此计算，而不是更少.

I want less to ignore math when it's in a calc function since I need the browser to do this calculation, not less.

无论如何，我是否可以让LESS忽略此计算，以便直接将其传递给浏览器?

Is there anyway I can make LESS ignore this calculation so I can pass it straight to the browser?

推荐答案

通过转义字符串使用它:

Use it through an escaped string:

width: ~"calc(100% - 40px)";

仅将其输出为CSS:

width: calc(100% - 40px);

(根据您的经验)而不是预先计算width: calc(60%).

Instead of precalculating width: calc(60%) (as you are experiencing).

注意:如果设置了 strict-math 模式，则 LESS 1.4+不需要此转义的字符串，因为所有"math"都需要使用其自己的括号来触发.因此，可以在原来的模式下使用该模式下的LESS 1.4 +，，如果您想要进行数学运算，则需要额外的括号和unit()像这样的功能:width: calc((100% - unit(40px)));.

NOTE: LESS 1.4+ does not need this escaped string if the strict-math mode is set, as all "math" then requires its own parenthesis to trigger. So LESS 1.4+ in that mode could be used as you originally had it, and if you wanted it to do the math, it would need extra parentheses and a unit() function like so: width: calc((100% - unit(40px)));.

这篇关于如何减少某些样式的数学运算量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！