在CSS3中的calc操作数的LESS转义中的空白保留

问题描述

我想在LESS中表达以下CSS：

  .a {
 min-height：calc （2em + 4px）; 
} 
  

因此，为了防止LESS尝试计算，使用LESS 的表达式：

  .a {
 min-height：〜'calc（2em + 4px）';但是，LESS的缩小引擎正在删除空格，并发出：
 
 > 
 
 
  .a {min-height：calc（2em + 4px）;} 
  
这是有问题的，因为webkit无法正确计算 2em + 4px ，而 2em_ + _4px 工作正常（下划线添加为了清楚。）看起来真正的bug在这里是在webkit，因为我希望CSS3 calc的语法允许在标记之间没有空格。
解决方案
这是一个老帖子，但我想告诉你一个简单的数学解决这个问题。
 
 
 
我的minifying引擎也有这个问题。 Mine可以很好地与减法，但除去空白。如果有人有同样的问题，这是最简单的解决方法。
 
 
 
如果你想这样：
  .a {
 min-height：〜'calc（2em + 4px）'; 
} 
  
改为：
  .a {
 min-height：〜'calc（2em  -  -4px）'; 
} 
  
 
I would like to express the following CSS in LESS:
.a {
    min-height: calc(2em + 4px);
}
So, in order to prevent LESS from attempting a computation, I've written the expression using the LESS escaping syntax:
.a {
    min-height: ~'calc(2em + 4px)';
}
However, LESS's minifying engine is removing the whitespace, and emitting:
.a{min-height:calc(2em+4px);}
This is problematic because webkit fails to properly compute 2em+4px, whereas 2em_+_4px works fine (underscores added for clarity.)  It seems that the real bug here is in webkit, as I would hope that the syntax of CSS3 calc allows there to not be whitespace between tokens.
 解决方案 
This is kind of an old post but I wanted to show you a simple mathematic workaround for this.
I also have this issue with my minifying engine. Mine works fine with substraction but remove whitespace in addition. If someone have the same problem, this is the simplest workaround.
If you want this:
.a {
    min-height: ~'calc(2em + 4px)';
}
Write it as this instead:
.a {
    min-height: ~'calc(2em - -4px)';
}
                        
这篇关于在CSS3中的calc操作数的LESS转义中的空白保留的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！