CODEWITHSUNDEEP
htmlcssless
robbclarke
robbclarke

Reputation: 749

Combining Less mixin and calc()

I'm trying to get a Less mixin to combine calc and a variable but I keep hitting a wall.

Essentially, a cell is supposed to be a square that's 20% of the monitor height minus a 68px nav bar at the bottom of the page.

There will be elements on the page that will have variable widths and heights based on the width of a cell.

So, something might be 3 cells wide and 2 cells tall.

I've got this for my Less but it fails.

Thoughts?

  .cellSize(@x:1, @y:1) {
    width: calc(~"((100vh - 68px) * .2)") * @x;
    height: calc(~"((100vh - 68px) * .2)") * @y;
  }
  
  .cell {
    .cellSize(1, 1);
    display: block;
    background: aqua;
  }

Is this even a thing?

Upvotes: 1

Views: 773

Answers (1)

Harry
Harry

Reputation: 89750

Less does not have a calc function. It is a CSS function and while using the CSS calc function all the operations should go within the braces. So, your code should be as follows (if my understanding is correct).

.cellSize(@x:1, @y:1) {
  width: calc(~"((100vh - 68px) * .2) * @{x}");
  height: calc(~"((100vh - 68px) * .2) * @{y}");
}

The @{x} and @{y} are interpolations which would substitute the value of the variables into the CSS calc function. So an input code like the below

.cell1 {.cellSize(1, 1);} /* removed other stuff for brevity */
.cell2 {.cellSize(2, 1);}

would result in the following output:

.cell1 {
  width: calc(((100vh - 68px) * .2) * 1);
  height: calc(((100vh - 68px) * .2) * 1);
}
.cell2 {
  width: calc(((100vh - 68px) * .2) * 2);
  height: calc(((100vh - 68px) * .2) * 1);
}

Also as seven-phases-max mentions in his comment, the below is a more optimized code because it moves a part of the calculation to the Less compiler and reduces the burden on the UA/CSS. The .2 * @x and .2 * @y are simple math which can be performed by the Less compiler during compilation time itself.

.cellSize(@x:1, @y:1) {
  width: calc(~"(100vh - 68px) *" .2 * @x);
  height: calc(~"(100vh - 68px) *" .2 * @y);
}

Upvotes: 3

Related Questions