CODEWITHSUNDEEP
cssless
babbaggeii
babbaggeii

Reputation: 7747

Is it possible to round the width of an element down to a number divisible by 8 in less?

I'm trying to make a chessboard with a single element. It is located within a container. I want it so that when the page is resized, the width and height are both divisible by 8.

So I was thinking, you get an eighth of the width (12.5%), round down to the nearest pixel, then multiply by 8 again. Is this possible?

So far I have:

@eighth: 12.5%;
@rounded: floor(@eighth);
@multiplied: @rounded * 8;

But this is giving a result in percent (96%), rather than in pixels. Can I convert from percent to pixels first?

Upvotes: 4

Views: 1233

Answers (2)

Asons
Asons

Reputation: 87262

You can do that, kind of, in CSS by using calc()

width: calc(12.5% / 8);

Side note:

I don't know LESS, and as commented by @MarkSchultheiss, make sure you set some parameter so LESS doesn't compute the calc(12.5% / 8) value while compiling the source.

Read more here (comments by @MarkSchultheiss):

Upvotes: 0

BurningLights
BurningLights

Reputation: 2397

No you can't convert from percent to pixels in the LESS, because at the time LESS is compiled into CSS, nothing is known about the size of the browser that will be displaying the webpage. This is only known when the final compiled CSS is loaded by the browser, along with the webpage.

Upvotes: 1

Related Questions