CODEWITHSUNDEEP
cssoperatorsless
Bento
Bento

Reputation: 333

How to calculate percentages in LESS CSS?

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.

Upvotes: 33

Views: 33859

Answers (3)

Valentine Shi
Valentine Shi

Reputation: 7800

As for 2022, LESS 4.0 and division operator concerned:

From 4.0, No division is performed outside of parens using / operator.

@color: #222 / 2; // results in `#222 / 2`, not #111 (!)
background-color: (#FFFFFF / 16); //results is #101010

See the docs.

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179046

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

Upvotes: 51

anddoutoi
anddoutoi

Reputation: 10111

Maybe the percentage function didn't exist when OP was asking but for future reference I add this answer.

div.child-container {
    width: percentage(140/620);
}

Upvotes: 27

Related Questions