禁用 LESS-CSS 覆盖 calc() [重复]

Posted 2023-03-06

【中文标题】禁用 LESS-CSS 覆盖 calc() [重复]

【英文标题】：Disable LESS-CSS Overwriting calc() [duplicate]

【发布时间】：2013-07-28 01:34:17

【问题描述】：

现在我正尝试在我的 LESS 代码中的 CSS3 中执行此操作：

width: calc(100% - 200px);

但是，当 LESS 编译时，它会输出：

width: calc(-100%);

有没有办法告诉LESS不要以这种方式编译并正常输出？

【问题讨论】：

我认为我的解决方案已经是一个非常丑陋的 hack，但最受好评的骗子使用与我的几乎相同的 hack，所以我想没有很多其他（更清洁的）方法。 :P

请注意，无论math 设置如何，Less 都不再折叠calc() 内的这些计算。

【参考方案1】：

使用escaped string（又名转义值）：

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

---

另外，如果您需要将 Less 数学与转义字符串混合使用：

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

编译为：

width: calc(100% - 15rem + 15px + 2em);

默认情况下，Less 将值（转义的字符串和数学结果）与空格连接起来。

【讨论】：

请注意，~"value" 语法已替换为e("value") 函数。见这里：lesscss.org/functions/#string-functions-e

@chharvey 你确定吗？ ~"" documentation 没有弃用通知。事实上，如果我正确阅读了e() function docs，那是e 函数已被~"" 替换。这个related answer 重申了这一点。

@FabrícioMatté 是的，你是对的。我误读了e() 文档中的警报。 ~'' 语法似乎更新了。

嗨。一个 Less.js 语言设计器在这里。如果对语言语法进行调整以将整个语句解释为字符串，您会怎么想？如：width~: calc(100% - 200px); 相当于：width: ~"calc(100% - 200px)";

@MatthewDean 在我看来，这看起来是一种改进。不过，我通常不喜欢用多种方式来编写同一件事——这是你必须做出的又一个（不必要的）选择，也是学习者必须记住的另一件事，并引发了编码风格的讨论。当然，作为语言设计者，您肯定已经知道所有这些缺点，所以我将把它留给您的团队来讨论这种语法糖化是否值得。而且，老实说，我最近很少使用计算/转义字符串，因为我通常可以使用 Flexbox 布局以更简单、更健壮的方式解决问题。

【参考方案2】：

除了使用my other answer 中描述的转义值外，还可以通过启用Strict Math 设置来解决此问题。

启用严格的数学运算后，只会处理不必要括号内的数学运算，因此您的代码：

width: calc(100% - 200px);

在启用严格数学选项的情况下会按预期工作。

然而，请注意严格数学是全局应用的，不仅在calc() 内部。这意味着，如果您有：

font-size: 12px + 2px;

Less 将不再处理数学运算——它将输出font-size: 12px + 2px，这显然是无效的 CSS。您必须将所有应由 Less 处理的数学运算包含在（以前不必要的）括号中：

font-size: (12px + 2px);

在开始一个新项目时，严格数学是一个不错的选择，否则您可能不得不重写大部分代码库。对于最常见的用例，other answer 中描述的转义字符串方法更合适。

【讨论】：

要在 gulp 中启用严格的数学运算，请传递以下选项：less(strictMath: true)

【参考方案3】：

这是一个跨浏览器少的 mixin，用于将 CSS 的 calc 与任何属性一起使用：

.calc(@prop; @val) 
  @prop: calc(~'@val');
  @prop: -moz-calc(~'@val');
  @prop: -webkit-calc(~'@val');
  @prop: -o-calc(~'@val');

示例用法：

.calc(width; "100% - 200px");

以及输出的 CSS：

width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: -o-calc(100% - 200px);

此示例的代码笔：http://codepen.io/patrickberkeley/pen/zobdp

【讨论】：

抛出ParseError: Syntax Error on line 2

@TomRoggero 你运行的是哪个版本的less？你的其他环境是什么？我已经更新了原始答案以包含一个工作示例。

我建议不要这样做。最好保持你的 CSS 纯净，然后使用 Autoprefixer 之类的东西来添加前缀，不仅是 calc，而且是任何其他可能使用的属性。

这太棒了 Patrick，我已经针对 LESS-Prefixer 发布了 PR 以供包含

【参考方案4】：

带变量的转义字符串示例：

@some-variable-height: 10px;

...

div 
    height: ~"calc(100vh - "@some-variable-height~")";

编译成

div 
    height: calc(100vh - 10px );

【讨论】：

...而 SCSS 语法类似于 height: calc(100vh - #$some-variable-height)

【参考方案5】：

Fabricio 的解决方案效果很好。

一个非常常见的 calc 用例是添加 100% 宽度并在元素周围添加一些边距。

可以这样做：

@someMarginVariable: 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
width: -o-calc(~"100% - "@someMarginVariable*2);

或者可以使用类似的mixin：

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) 
  @minusValue: (@marginSize+@paddingSize)*2;
  padding: @paddingSize;
  margin: @marginSize;
  width: calc(~"100% - "@minusValue);
  width: -moz-calc(~"100% - "@minusValue);
  width: -webkit-calc(~"100% - "@minusValue);
  width: -o-calc(~"100% - "@minusValue);

【讨论】：

您将变量传递到 calc 的示例非常有用。阅读上述接受的答案后，我遇到的确切后续问题。 ?

np 但是我认为 patrickberkeley 的例子比我的好;)

将 calc 与 margin 混合是什么意思？

@Dmitry 为什么不呢？如果没有这种技巧，你如何获得容器宽度的 100%-20px，如果你不能使用 flexbox 增长？