是否可以将元素的宽度向下舍入到可被 8 整除的数字

Question

我正在尝试用单个元素制作一个棋盘。它位于容器内。我希望它使页面大小调整时，宽度和高度都可以被 8 整除。

所以我在想，你得到宽度的八分之一（12.5%），四舍五入到最接近的像素，然后再次乘以 8。这可能吗？

到目前为止，我有：

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

但这是以百分比（96%）而不是像素给出的结果。我可以先从百分比转换为像素吗？

Answer 1

不，您不能在 LESS 中从百分比转换为像素，因为在将 LESS 编译为 CSS 时，对将显示网页的浏览器的大小一无所知。只有当浏览器加载最终编译的 CSS 以及网页时，才知道这一点。

Answer 2

你可以

通过使用calc()在CSS中做到这一点。

width: calc(12.5% / 8);

旁注：

我不知道 LESS，

正如 @MarkSchultheiss 所评论的那样，请确保您设置了一些参数，以便 LESS 在编译源代码时不会计算calc(12.5% / 8)值。

在此处阅读更多内容（@MarkSchultheiss的评论）：

• https://github.com/less/less.js/issues/974
• 使用 CSS3 计算进行不太激进的编译