4

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?

babbaggeii
  • 7,577
  • 20
  • 64
  • 118

2 Answers2

1

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.

BurningLights
  • 2,387
  • 1
  • 15
  • 22
0

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

Community
  • 1
  • 1
Asons
  • 84,923
  • 12
  • 110
  • 165
  • Use Less compile with `lessc --strict-math=on` to not evaluate the expression inside the `calc` perhaps also? – Mark Schultheiss Feb 17 '16 at 19:52
  • @MarkSchultheiss Please update my answer if you like, as I don't know LESS and therefore can't make the correct adjustment. – Asons Feb 17 '16 at 19:53
  • :) and I am not an expert thus why I made a comment rather than an edit :) – Mark Schultheiss Feb 17 '16 at 19:55
  • @MarkSchultheiss Hahaha ... I will remember that approach, it's a good one :) – Asons Feb 17 '16 at 19:56
  • 1
    Comment reference: https://github.com/less/less.js/issues/974 note to read the comments on this page and possible workaround here: http://stackoverflow.com/questions/11972084/less-aggressive-compilation-with-css3-calc – Mark Schultheiss Feb 17 '16 at 20:06