How to Calculate Percentages in Less CSS

How to calculate percentages in LESS CSS?

According to the LESS CSS website, you need to change the order of your equation

The output is pretty much what you expect—LESS understands the difference between colors and units. If a unit is used in an operation, like in:

@var: 1px + 5;

LESS will use that unit for the final output—6px in this case.

It should be:

width: 100%*(140/620);

Percentage of a value in less css

You could use the following

width: @x - (@x/5);

Or for any particular percentage:

width: @x - ((@x/100)*(100-20));

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.

less css multiply variable with percentage

Just use decimal notation:

@hex-width : 67px;
margin: 1px calc(0.25 * @hex-width);

How to iterate keyframe percentages Less CSS

It seems like the Less compiler does not evaluate functions when directly used as a selector. Solution would be to make use of a temporary variable like in either of the below snippets:

.loop (@n, @index: 0) when (@index <= @n) { /* note the <= as we need 100% frame also */
  @keyframeSel: percentage(@index/@n); /* note the lack of * 100 as Less already does it */
  @{keyframeSel}{
    prop: value;
  }
  .loop(@n, (@index + 1)); // Next iteration.
}
@keyframes anim {
  .loop(20); // Launch the loop.
}

or

.loop (@n, @index: 0) when (@index <= @n) {
  @keyframeSel: @index/@n * 100%;
  @{keyframeSel}{
    prop: value;
  }
  .loop(@n, (@index + 1)); // Next iteration.
}
@keyframes anim {
  .loop(20); // Launch the loop.
}

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}");

How can I compute a percentage based margin with LESS css?

Simply multiply by 100%

$ echo "*{width: (9/960)*100%;}" | .npm/less/1.3.0/package/bin/lessc -
* {
  width: 0.9375%;
}

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

---

Related Topics