Skip to content

Calculating width from percent to pixel then minus by pixel in LESS CSS

You can escape the calc arguments in order to prevent them from being evaluated on the compilation.

Using your example, you would simply surround the arguments, like this:

Demo: http://jsfiddle.net/c5aq20b6/


I find that I use this in one of the following three ways:

Basic Escaping

Everything inside the calc arguments is defined as a string, and is totally static until it’s evaluated by the client:

LESS Input

CSS Output

Interpolation of Variables

You can insert a LESS variable into the string:

LESS Input

CSS Output

Mixing Escaped and Compiled Values

You may want to escape a percentage value, but go ahead and evaluate something on compilation:

LESS Input

CSS Output

Source: http://lesscss.org/functions/#string-functions-escape.

Share via
Copy link
Powered by Social Snap