Less.js: CSS3 calc() 函数不适用于 LESS

创建于 2012-10-08 · 51评论 · 资料来源: less/less.js

我知道已经有人报告了，但由于信息不足，错误已关闭。

我有以下 CSS 代码：

#id1 {
    position: fixed;
    left: 0; top: 0;
    width: 130px;
}
#id2 {
    position: fixed;
    right: 0; top: 0;
    width: calc(100% - 130px);
}

我想使用130px作为参数将它转换为 LESS，但是 calc 被 LESS 解释为：

<strong i="11">@id1width</strong>: 130px
#id1 {
    position: fixed;
    left: 0; top: 0;
    width: @id1width;
}
#id2 {
    position: fixed;
    right: 0; top: 0;
    width: calc(100% - @id1width);
}

使最后一行转换为width: calc(-30%); ，这显然不是我们想要的。我尝试使用width: ~"calc(100% - @id1width)";但它使@id1width不被解释。

我认为 LESS 不应该使用 CSS3 为内部使用保留的东西......

资料来源

mgol

👍13 ❤2 😄2

最有用的评论

它们可能被关闭为重复项..虽然我找不到关于 calc.. 见 #146 #122 和 #915

解决方法： width: ~"calc(100% - @{id1width})"; - 注意变量周围的大括号。

我们正在转向一个系统，该系统仅评估括号内的内容以解决此问题。

lukeapage 于 2012-10-08

👍51 🎉11 ❤6 😄5

所有51条评论

它们可能被关闭为重复项..虽然我找不到关于 calc.. 见 #146 #122 和 #915

解决方法： width: ~"calc(100% - @{id1width})"; - 注意变量周围的大括号。

我们正在转向一个系统，该系统仅评估括号内的内容以解决此问题。

lukeapage 于 2012-10-08

👍51 🎉11 ❤6 😄5

：+1：

shankarcabus 于 2012-12-18

<strong i="5">@rows</strong>: 10;

<strong i="6">@row1</strong>: 1 / <strong i="7">@rows</strong> * 100%;

.featured1
{
  top: ~'-webkit-calc(@{row1} + 20px)';
  right: 0;
  bottom: @row5;
  left: @col9;
}

这一点 LESS 会将‘ @row1 ’的值处理为 10%，这很好。但是，当它位于 LESS 的转义部分内并用卷曲包裹以保留 LESS 变量时，它返回“10”而没有“%”。

我找到了一个尚未让我失望的解决方法。如果您在转义代码中的“row1”变量的闭合卷曲之后放置另一个“%”，它将正常工作...

~'-webkit-calc(@{row1}% + 20px)';

但这似乎是添加另一个假设已经在变量中的单元类型的技巧。

jonjohnjohnson 于 2012-12-19

@jonjohnjohnson这已在头部修复，将在 1.3.2 中

此错误的其余部分将在 1.4.0 中解决

lukeapage 于 2012-12-19

不确定这是否是同一个问题，但我遇到了以下问题。请注意，这里没有不那么具体的东西，1.3.3 减少了其他有效的 CSS。

这是 CSS

html, body {
    margin:0, padding:0, border:0;
    height: 100%;
}

#content {
    height: -webkit-calc(100% - 40px);
    height: calc(100% - 40px);
    background-color:gray;
}

#footer {
    background-color:black;
}

这是包含它的 HTML

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet/less" type="text/css" href="test.css" />
<script src="less-1.3.3.min.js"></script>
<body>
<div id="content"></div>
<div id="footer" style="height:40px"></div>
</body>
</html>

“内容”被设置为 60% 的高度，所以 less 解析和错误地解析 calc 表达式，而不是将它原封不动地传递给浏览器。在 Safari 6.0.2 和 Firefox 中测试。

faceless2 于 2013-01-14

在 1.4.0 的 master 上修复

lukeapage 于 2013-02-02

height: ~"calc(100% - 50px)";

仍然产生：

height: calc(50%);

为了我。我想要：

height: calc(100% - 50px);

OliverJAsh 于 2014-06-03

更重要的是，即使将严格的数学设置为on ，它仍然会产生height: calc(50%); on 。

OliverJAsh 于 2014-06-03

@OliverJAsh我无法使用 Less 1.7.0 重现您的结果（转义值和--strict-math:on都按预期工作）...您能否提供有关您使用的编译器/环境/脚本的更多详细信息？（以防万一有可能导致此类错误结果的 Bootstrap 构建脚本问题：https://github.com/twbs/bootstrap/issues/13604，也许这也是您的情况？）。

seven-phases-max 于 2014-06-03

我在 1.6.3 中遇到了这个问题（出于某种原因，当我升级到 1.7.x 时，WinLESS 无法编译，所以我现在坚持使用 1.6.x）

我的快速修复只是为了逃避等式的一部分，例如：

height: calc(~"100%" - unit(<strong i="7">@var</strong>, px));

这甚至适用于变量，例如<strong i="10">@var</strong>: 50 。或者你可以像calc(~"100% - 50px");一样逃避整个计算

twiginteractive 于 2014-07-26

👍5

@twiginteractive如果您必须使用--strict-math选项off （默认设置）进行转义，那么这不是问题，而是预期的行为。见--strict-math 。

seven-phases-max 于 2014-07-26

👍1

@seven-phases-max 嗯 - 根据文档，SM 关闭（默认）然后这个 _should_ 得到正确解析（即未触及）
height: calc(100% - 10px);

但事实并非如此。输出 CSS 是height: calc(90%); ，这不是想要的结果。也许这在 1.7 中已修复，但正如我所说，在我弄清楚是什么破坏了 WinLESS 编译之前，我现在无法使用该版本。

（除非我误读了文档，因为它说“将被正确处理”...... LESS 无法知道 100% 的值，所以它不应该对“100% - 10px”进行数学计算）

twiginteractive 于 2014-07-26

@twiginteractive

根据文档，在关闭 SM（默认）的情况下，这应该被正确解析（即未触及）

不，那里的词是currently不是correctly （即“目前将_被处理_”）。

seven-phases-max 于 2014-07-26

@seven-phases-max 啊 - 我的错，现在说得通了。感谢您的澄清。

twiginteractive 于 2014-07-27

高度：~"calc(100% - 50px)"; 为我工作。

aamirshahzad 于 2014-09-05

👍18 🎉5

~~这就是 Less.js 开始弄乱你的代码的地方。~~

height: _calc(50%);
height: calc(100% - 50%); /* browser-native */

stevenvachon 于 2014-09-05

@stevenvachon

据说 v2.0 可以选择为其函数添加前缀，如下所示：

这不会以任何方式影响calc 。没有内置的calc函数，Less 只是根据其（Less 的）规则计算数学表达式。就是这样。如果您不想要这种“混乱”，请使用--strict-math 。

seven-phases-max 于 2014-09-05

Ps 这个问题的解决方案是严格的数学。也许我们应该
在调用 calc 时强制执行严格的数学运算？

lukeapage 于 2014-09-05

~~在 Less 之后使用 Myth 时，问题会扩大。~~

stevenvachon 于 2014-09-05

为什么？神话会删除括号吗？严格的数学使得不太合适的超集
css的。

lukeapage 于 2014-09-05

也许我们应该在调用 calc 时强制使用严格的数学？

我们已经在 #1872 中讨论过这个问题，并且有一些反对“local strict- math:on ”解决方法的论点。建议的解决方案（尚未完全确定）在 #1880 中。

seven-phases-max 于 2014-09-05

@stevenvachon

即使使用strictMath，我们也需要~"calc(...)" 以便Less 忽略它。

例子？即一个片段，其中 Less 将calc内的表达式与--strict-math=on拧紧。

seven-phases-max 于 2014-09-05

从什么时候开始 v2 前缀起作用？是我们决定了而我忘记了吗？

lukeapage 于 2014-09-06

从什么时候开始 v2 前缀起作用？是我们决定了而我忘记了吗？

不。我想这只是稍微高估了https://github.com/less/less.js/issues/2102#issuecomment -50286985。

seven-phases-max 于 2014-09-06

是的，抱歉，不是“选项”，而是“编写提供选项的插件的能力”。 ~~我将不得不在calc()上使用和不使用~""再次测试一些代码。~~ 前段时间我一定是弄错了，只是带着那个误会继续前进。我有一些较旧的代码，我现在必须对其进行修改。

stevenvachon 于 2014-09-06

当与width结合使用时，我注意到calc发生了一些奇怪的事情。我把它全部放进了一个代码笔中只是为了让它更容易： http ://codepen.io/anon/pen/OVpJvP

alenb 于 2015-06-02

@alenb

那么有什么奇怪的呢？您的 codepen 中的代码已按预期编译...

seven-phases-max 于 2015-06-02

@七阶段最大

它已编译，但不是预期的。更仔细地检查 CSS 代码。

这很奇怪，因为它在最右边仍然有一个间隙，即使它应该与 3 列完全伸展。前两列应为 33.33% 减去 20px，最后一列应为 33.33%。前 2 列的 padding-right 为 20px，但这并没有反映出来，因为最右侧显然有一个间隙。

昨晚我玩了更多，并且 margin-right 而不是 padding-right 可以解决问题并解决问题。

alenb 于 2015-06-03

@alenb

它已编译，但不是预期的。更仔细地检查 CSS 代码。

当然，我做到了。因此，如果您期望有所不同 - 请说明。

前 2 列的 padding-right 为 20px，但这没有反映出来

padding不会以任何方式影响宽度（除非您设置了特定的 [ box-sizing ](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing )), consult [CSS specs](http://www.w3.org/TR/REC-CSS2/box.html). So you simply get : (33% - 20px) + (33% - 20px) + 33% = 99% - 40px -> 40px` 与预期的差距。

无论哪种方式，这都只与 CSS 相关，与 Less 编译calc无关。单击 codepen 代码中的“查看已编译”按钮，在那里您会看到您的calc语句由 Less 编译为您指定的内容）。

seven-phases-max 于 2015-06-03

@七阶段最大

我本以为 codepen 会使这一点显而易见，但完全没有问题。

谢谢（你的）信息！

alenb 于 2015-06-03

今天，它仍然不适用于 less 的默认安装（使用 npm）。

我不得不使用：
min-height: ~"calc(100% - 262px)"; //calc(100% - 262px);

我不知道这是否正常，因为该错误被标记为“已关闭”，但只是想让您知道。

rkyoku 于 2016-04-08

👍1

@RenaudParis --strict-math

seven-phases-max 于 2016-04-08

好的，我试试，谢谢！但不是更好吗？
默认？因为它很令人惊讶，当你不知道这个的时候
范围。

不管怎么说，还是要谢谢你！

勒文。 8 月 2016 à 20:48，Max Mikhailov通知@ github.com a
评论：

@RenaudParis https://github.com/RenaudParis --strict-math
http://lesscss.org/usage/#command -line-usage-strict-math
—
你收到这个是因为你被提到了。
直接回复此邮件或在 GitHub 上查看
https://github.com/less/less.js/issues/974#issuecomment -207553212

rkyoku 于 2016-04-08

但是默认情况下不是更好吗？

将其设为默认值会破坏许多现有的 Less 代码库。有一次（在 ~ v1.4.0 ）尝试使其成为默认值，但由于遗留的向后兼容性，它被逆转了......在#1880 开发了一种更新的、侵入性较小的方法（但是它尚未实施）。

seven-phases-max 于 2016-04-09

好的，谢谢你花时间向我解释，Max！

萨姆。 9 月 2016 13:46，Max Mikhailov [email protected] a
评论：

但不是更好吗？
默认？
将其设为默认值会破坏许多现有的 Less 代码库。一次
（在~v1.4.0）实际上试图使它成为默认值，但是
然后由于遗留的向后兼容性而被逆转......一个更新的，
在#1880 开发了较少侵入性的方法
https://github.com/less/less.js/issues/1880 （但它没有实现
然而））。
—
你收到这个是因为你被提到了。
直接回复此邮件或在 GitHub 上查看
https://github.com/less/less.js/issues/974#issuecomment -207776654

rkyoku 于 2016-04-09

我已经解决了这个问题：

.calc(<strong i="6">@prop</strong>, @val) {
    @{prop}: ~"calc(~'@{val}')";
    @{prop}: ~"-moz-calc(~'@{val}')";
    @{prop}: ~"-webkit-calc(~'@{val}')";
    @{prop}: ~"-o-calc(~'@{val}');"
}
.calc(width, "80% - 36px");

当我使用command line它是正确的。只有less-loader不正确。所以我在stackoverflow上找到了这个解决方案

我将它复制到我的代码中，遗憾的是它也不正确。所以我修改了一些东西。有用！

不幸的是，命令行不正确！！😂😂😂

mqliutie 于 2016-09-01

不知道为什么这个问题被关闭了。 Less 会改变原生 CSS 行为是没有意义的。

vincentmorneau 于 2016-11-03

... Less 会改变原生 CSS 行为。

它不会。只需设置--strict-math=on （默认情况下未启用，因为与依赖于--strict-math=off大量 Less 项目兼容，以及 #1880 中提到的一些注意事项）。

seven-phases-max 于 2016-11-04

👍1

在UIkit 3主题中，我在my_theme.less ：

height: ~"calc(100vh - 20px)";

它有效。

oshihirii 于 2017-08-06

👍4 😕1

在 *.less 文件中写入时它对我有用https://github.com/less/less.js/issues/974#issuecomment -9229470

感谢@lukeapage ！ 🥇

quytm2239 于 2017-10-16

嗨@mqliutie感谢您为 calc 添加 mixin 建议，但是，您的 Mixin 中有一个额外的 ~ 破坏了编译：

混合应该是

.calc(<strong i="8">@prop</strong>, @val) {
    @{prop}: ~"-webkit-calc('@{val}')";
    @{prop}: ~"-moz-calc('@{val}')";
    @{prop}: ~"calc('@{val}')";
}

输入如下：
.calc(width, "100% - 60px");

输出如下：
宽度：计算（100% - 60px）；

ciaranlp 于 2017-10-19

为什么这个问题被关闭了？！它不是固定的。

当我写calc(50% - 20px)时，我仍然收到calc(30%) calc(50% - 20px) 。这从来不是任何人想要的。除了盲目地用不同的单位计算是错误的这一事实之外，它应该在 calc() 中保持原样，除非它可以以 100% 的可靠性计算（例如相同的单位）。我正在使用 LESS 2.7.3。

请重新打开此问题。

thany 于 2018-01-25

👍1

@thany
参考这些评论，它们描述了这不是一个问题，因为处理数学的默认设置是历史的副产品，您可以随时更改默认设置。
https://github.com/less/less.js/issues/974#issuecomment -207553212
https://github.com/less/less.js/issues/974#issuecomment -207776654

jonjohnjohnson 于 2018-01-25

@jonjohnjohnson这只是再次说明问题。如果严格模式修复了它（还没有尝试过，应该不需要启用所有类型的非默认标志来解决错误），那么它应该在默认情况下打开。

不管你怎么说，这个问题都不是由任何定义来解决的。

thany 于 2018-01-26

@thany我只是想帮助您了解开发人员认为这不是问题。这些评论不仅重述了问题，还描述了开发人员在该问题上的立场。祝你好运。

jonjohnjohnson 于 2018-01-26

@thany

那么它应该默认打开。

不可能是因为这会立即破坏那里的无数项目。因此，如果您将默认行为视为问题，只需设置记录的选项即可。根据任何定义。

为什么这个问题被关闭了？！

因为关于如何改进默认行为的最新讨论在这里。

seven-phases-max 于 2018-01-26

@thany作为@seven-phases-max，如果你想看到这个问题的解决，贡献给#1880。我认为解决方案就在那里，但还没有足够的社区权衡来做出准备实施的决定。这是一个很长的话题，但这就是寻找解决方案所需要的：审查提案并以一种或另一种方式权衡。然后：有人负责实施工作。

matthew-dean 于 2018-01-27

 width: 15%;
 height: ~"calc(width)";

如何使高度=宽度

xiaomizhou66 于 2018-11-18

👍1

@xiaomizhou66
这与 LESS 无关，也与这个问题无关。这纯粹是一个 CSS 问题。请搜索诸如“css keep aspect”之类的内容，您会找到一些答案。

thany 于 2018-11-26

所以这仍然是坏的。 calc(100vh - 138px) 出来 -38px。

willatathena 于 2019-03-15

@willatathena

如果您在 Less 3.x 中遇到此问题，请创建单独的错误报告。
对于较早的 Less 版本，这是默认情况下的预期行为（阅读上面的帖子以了解如何处理它）。

seven-phases-max 于 2019-03-16

此页面是否有帮助？

0 / 5 - 0 等级

Less.js: CSS3 calc() 函数不适用于 LESS

最有用的评论

所有51条评论

相关问题