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.