How to calculate percentages in LESS CSS?

HappyElephant picture HappyElephant · Jan 6, 2012 · Viewed 30.7k times · Source

I would like to calculate the width of child-container (div etc) in percentages depending on the parent container with LESS CSS.

I am using the forumula by Ethan Marcotte: target / context = result.

Parent container: 620px
Child container: 140px

I am using this calculation:

div.child-container {
    width: (140/620)*100%;
}

However the output is:

div.child-container {
    width: 0.2258064516129;
}

I would like to move the decimal point two digits and add the %, like this:

div.child-container {
    width: 22.58064516129%;
}

Any hints greatly appreciated.

Answer

zzzzBov picture zzzzBov · Jan 6, 2012

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