Calculating Width from Percent to Pixel Then Minus by Pixel in Less CSS

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 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.

Setting width/height as percentage minus pixels

You can use calc:

height: calc(100% - 18px);

Note that some old browsers don't support the CSS3 calc() function, so implementing the vendor-specific versions of the function may be required:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

Angular compilation .less is calculating pixels as percentage: 'calc(100% - 26px)' to 'calc(76%)

you can escape your declaration (notice the ~ tilde):

.qb-select-content {
    width: calc(~100% - 26px);
}

the above will output after compilation:

.qb-select-content {
    width: calc(100% - 26px);
}

keep in mind that it's not the angular-cli but your LESS compiler doing this bit

alternatively you can look into interpolation which is a pretty useful feature in other situations too: https://github.com/SomMeri/less4j/wiki/Less-Language-String-Interpolation

LESS plus pixel with percentage

LESS and CSS have a calc function. If you want to use the CSS calc function instead of LESS's, then you need to escape your equation. Like so:

height: calc(~"100% + 60px");

You can still pass LESS variables into this calc call. You need to encapsulate your variable with brackets though. Like so:

@padding-variable: 60px;

height: calc(~"100% + @{padding-variable}");

One pixel difference in percentage width

Remove whitespace from between your divs. HTML is a semi-whitespace-sensitive language.

Think of it this way; if you had the text:

<span>Hello</span> <span>World</span>

Then the output would be "Hello World" with a space between the words, because there is a space between the spans.

When you are using inline-block the whitespace between your divs matters, and is becomeing that small gap that you see. In other words, this will have a gap:

<div></div>
<div></div>

and this will not have a gap:

<div></div><div></div>

when inline-block is used.

---

Related Topics