带百分比的 LESS 加像素

Question

height: calc(100% + 60px);

上面的代码将失败，任何线索如何使用 LESS 将额外的 60px 添加到 100% 的高度？

Answer 1

LESS 和 CSS 有一个calc函数。如果你想使用 CSS calc 函数而不是 LESS 函数，那么你需要转义你的等式。这样：

height: calc(~"100% + 60px");

您仍然可以将 LESS 变量传递到此calc调用中。不过，您需要用括号封装变量。这样：

@padding-variable: 60px;
height: calc(~"100% + @{padding-variable}");

Answer 2

以

百分比表示的高度不能每次都正常工作。如果您的父级有固定高度(以 px、pt、视口单位为单位(，它将正常工作。

最好使用视口作为高度。如果您不知道，请阅读以下文章。

https://css-tricks.com/viewport-sized-typography/

https://www.w3schools.com/cssref/css_units.asp