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

Question

I will calculate width in some element from percent to pixel so I will minus -10px via using LESS and calc(). It´s possible?

div {     span {         width:calc(100% - 10px);     } } 

I using CSS3 calc() so it doesn't work: calc(100% - 10px)

Example: if 100% = 500px so width = 490px (500-10);

I made a demo for testing : http://jsfiddle.net/4DujZ/55/

so padding will say: 5 (10px / 2) all the time when I resizing.

Can I do it in LESS? I know how to do in jQuery and simple CSS like margin padding or else... but i will try to do functional in LESS with calc()

Answer 1

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

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

calc(~'100% - 10px') 

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

div {     > span {         width: calc(~'100% - 10px');     } } 

CSS Output

div > span {   width: calc(100% - 10px); } 

Interpolation of Variables

You can insert a LESS variable into the string:

LESS Input

div {     > span {         @pad: 10px;         width: calc(~'100% - @{pad}');     } } 

CSS Output

div > span {   width: calc(100% - 10px); } 

Mixing Escaped and Compiled Values

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

LESS Input

@btnWidth: 40px; div {     > span {         @pad: 10px;         width: calc(~'(100% - @{pad})' - (@btnWidth * 2));     } } 

CSS Output

div > span {   width: calc((100% - 10px) - 80px); } 

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