How to use calc with percentages and pixels in LESS

04 July 2017 on CSS, english, LESS

Are you trying to figure out how to use calc with percentages and pixels in LESS? Let's see how to do that:

Using calc with percentages and pixels

For example, you need to set an element's width the 100% minus 50px:

#myelement {
  width: calc(~'100% – 50px');
}

Note the ~ character at the beginning and the formula quoted with '.

Of course, you can use it for width, height, top, left, right, bottom, padding, margin and almost any CSS property.

If have any issue or doubt leave a comment!