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

css CSS

凯卡卡西

2020-03-18

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

width: calc(100% - 200px);

但是,LESS编译时将输出以下内容:

width: calc(-100%);

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

第2187篇《禁用LESS-CSS覆盖calc()\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
Harry卡卡西 2020.03.18

除了使用我的其他答案中所述的转义值外,还可以通过启用“ 严格数学”设置来解决此问题

启用严格的数学运算后,仅处理不必要括号内的数学运算,因此您的代码:

width: calc(100% - 200px);

启用严格的数学选项后,将可以按预期工作。

但是,请注意,严格数学不仅在内部应用,而且在全局应用calc()这意味着,如果您具有:

font-size: 12px + 2px;

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

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

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

猪猪Stafan小卤蛋 2020.03.18

使用转义字符串(也称为转义值):

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

另外,如果您需要将Less Math与转义字符串混合使用:

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

编译为:

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

默认情况下,这作为“少”将值(转义的字符串和数学结果)连接在一起时起作用。

GO猴子 2020.03.18

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);
}
Eva十三 2020.03.18

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

@some-variable-height: 10px;

...

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

编译为

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android