10

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.

Will Bradley
  • 1,733
  • 15
  • 27
  • I have a workaround, which is to simply use min-height: 2.5em, which for my purposes is good enough, but I'm still interested in knowing whether LESS provides this affordance. – Will Bradley Oct 09 '13 at 22:02
  • goto less2css.org and paste in .a { min-height: ~'calc(2em + 4px)'; } - the output isn't minified - ie it looks like 2em_+_4px – Danield Oct 09 '13 at 22:02
  • @Danield, thanks, however in my case, I want to minify the output, just not a certain range of text... essentially I want a workaround for a particular minification. I may just close this question since the issue is clearly in webkit, not LESS. – Will Bradley Oct 09 '13 at 22:04
  • Don't know if it will resolve your issue, but [LESS 1.5 changes included a change in the minifier software they use](http://lesscss.org/#changes). If you haven't already, you might try it out. – ScottS Nov 04 '13 at 01:50
  • 1
    FYI--the [specs for CSS3](http://dev.w3.org/csswg/css-values/#calc-syntax) _do require_ whitespace around '+' and '-' operators, so it is not a webkit bug. – ScottS Nov 12 '13 at 18:06

2 Answers2

14

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)';
}
service-paradis
  • 3,333
  • 4
  • 34
  • 43
  • 2
    Thank you! You saved our day! It's a bug in older YUI Compressor versions (before 2014). You need to write double minus instead of plus there. More info: https://github.com/yui/yuicompressor/issues/59 << We are still using the old version in core components of our web project. – Jana Weschenfelder Mar 23 '16 at 14:57
1

You must use "escape" function applying it in a different way:

FIRST OPTION:

.a {
    min-height:calc(~"2em + " 4px);
}

SECOND OPTION: Limiting use of escape character ~ only to + symbol:

.a {
    min-height:calc(2em ~"+" 4px);
}

Both of them will result in the following processed CSS:

.a {
    min-height: calc(2em + 4px);
}
Luca Detomi
  • 5,564
  • 7
  • 52
  • 77
  • Well, Will's problem was not in Less code but in a minifier which indeed produced invalid CSS (since whitespace are required by the spec. there). – seven-phases-max Feb 04 '15 at 19:17