CODEWITHSUNDEEP
csswebkitlesswhitespace
Will Bradley
Will Bradley

Reputation: 1743

Whitespace preservation in LESS escaping for calc operands in CSS3

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.

Upvotes: 10

Views: 3079

Answers (2)

service-paradis
service-paradis

Reputation: 3398

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

Upvotes: 14

Luca Detomi
Luca Detomi

Reputation: 5716

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

Upvotes: 1

Related Questions