CODEWITHSUNDEEP
cssless
cwd
cwd

Reputation: 54756

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

I'm working with a fluid / responsive layout, based on a photoshop file based on a 960 grid. For one of the elements I want a 9px left margin when the layout is at 960px wide.

I've seen example doing this by computing 9/960, which comes out to 0.009375, and setting:

margin-left: 0.009375%

However I'm using LESS css / LESS.app which can do math on variables and create them dynamically.
I've tried these methods but they are throwing errors:

margin-left:9/960%;
margin-left:9/960\%;
margin-left:(9/960)%;
margin-left:{9/960}%;

How can I have LESS do the math on this automatically?

Clarification

If I use margin-left:9/960; LESS will compile but the output css is margin-left: 0.009375; which doesn't include the percentage sign and thus won't be rendered by the browser (AFAIK).

Upvotes: 1

Views: 1868

Answers (1)

Hauleth
Hauleth

Reputation: 23556

Simply multiply by 100%

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

Upvotes: 1

Related Questions