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是简单的数学运算，可以在编译时自身由Less编译器执行。

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

结合less mixin和calc（）

1 个答案: