问答中心分类: CSS禁用 LESS-CSS 覆盖 calc() [重复]
0
匿名用户 提问 1天 前

这个问题在这里已经有了答案:

如何防止 Less 尝试编译 CSS calc() 属性?
(4 个回答)

关闭5年前.

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

width: calc(100% - 200px);

但是,当 LESS 编译时,它会输出:

width: calc(-100%);

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

Fabrício Matté 回复 1天 前

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

Fabrício Matté 回复 1天 前

请注意,Less 不再折叠这些计算calc()不管math环境。

4 Answers
0
Fabrício Matté 回答 1天 前

除了使用中描述的转义值我的另一个答案,也可以通过启用严格的数学环境。
启用严格的数学运算后,只会处理不必要括号内的数学运算,因此您的代码:

width: calc(100% - 200px);

启用严格数学选项后将按预期工作。
然而,请注意,严格数学是全局应用的,不仅在内部calc().这意味着,如果您有:

font-size: 12px + 2px;

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

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

在开始一个新项目时,严格数学是一个不错的选择,否则您可能不得不重写代码库的大部分内容。对于最常见的用例,转义字符串方法在其他答案更合适。

Simon Epskamp 回复 1天 前

要在例如 gulp 中启用严格的数学运算,请传递以下选项:less({strictMath: true})

0
Patrick Berkeley 回答 1天 前

这是一个使用 CSS 的跨浏览器少的 mixincalc任何属性:

.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

Tom Roggero 回复 1天 前

投掷ParseError: Syntax Error on line 2

Patrick Berkeley 回复 1天 前

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

zeh 回复 1天 前

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

ekkis 回复 1天 前

这太棒了帕特里克,我已经发布了一个 PR 反对 LESS-Prefixer 包含

0
Achim Koellner 回答 1天 前

带有变量的转义字符串示例:

@some-variable-height: 10px;

...

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

编译为

div {
    height: calc(100vh - 10px );
}
Achim Koellner 回复 1天 前

…而 SCSS 语法类似于 height: calc(100vh – #{$some-variable-height})

0
Sebastien Lorber 回答 1天 前

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);
}
Hynes 回复 1天 前

您将变量传递给 calc 的示例非常有帮助。阅读上述接受的答案后,我遇到的确切后续问题。 👍

Sebastien Lorber 回复 1天 前

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

Dmitry 回复 1天 前

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

Sebastien Lorber 回复 1天 前

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