禁用LESS-CSS覆盖calc（）[重复]

5 回答

• 60

  使用escaped string（a.k.a . 转义值）：

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

  ---

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

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

  编译为：

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

  这可以作为默认情况下使用空格连接值（转义字符串和数学结果） .

  回复于 2024-05-19T08:23:10+08:00
• 746

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

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

  width: calc(100% - 200px);
  

  在启用严格数学选项的情况下可以正常工作 .

  However ，请注意严格数学应用于全局，而不仅仅是 calc() . 这意味着，如果你有：

  font-size: 12px + 2px;
  

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

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

  在开始一个新项目时，Strict Math是一个很好的选择，否则你可能需要重写代码库的很大一部分 . 对于最常见的用例，_946585中描述的转义字符串方法更合适 .

  回复于 2024-05-19T08:23:10+08:00
• 11

  这里's a cross-browser less mixin for using CSS' s 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

  回复于 2024-05-19T08:23:10+08:00
• 6

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

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

  编译成

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

  回复于 2024-05-19T08:23:10+08:00
• 23

  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);
  }
  

  回复于 2024-05-19T08:23:10+08:00