结合less mixin和calc（）

Question

我正在尝试使用Less mixin来组合calc和变量，但我一直在撞墙。

基本上，一个单元应该是一个正方形，它占显示器高度的20％减去页面底部的68px导航条。

页面上将有元素具有基于单元格宽度的可变宽度和高度。

因此，有些东西可能是3个细胞宽，2个细胞高。

我为我的Less得到了这个，但它失败了。

思考？

  .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; } 

这甚至是一件事吗？

Answer 1

Less没有calc函数。 它是一个CSS函数，在使用CSS calc函数时，所有操作都应该在大括号内。 所以，你的代码应该如下（如果我的理解是正确的）。

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

@{x}和@{y}是插值，它们将变量值替换为CSS calc函数。 所以输入代码如下所示

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

会导致以下输出：

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

---

另外，在他的评论中提到了七个阶段的最大值，下面是一个更优化的代码，因为它将计算的一部分移动到Less编译器并减轻了UA / CSS的负担。 该.2 * @x和.2 * @y是可以由更少的编译器在编译时本身进行简单的数学。

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