LESS:高度和宽度占像素的百分比，并将它们相加

Question

在 Less 中我定义了这些:

@height-5: (@winheight / 100) * 5;
@height-10: (@winheight / 100) * 10;
...etc

@winheight 来自:

@winheight:`$(window).height()`;

(宽度相同)

现在我可以使用:

width: ~"@{width-10}px";
height: ~"@{height-100}px";

设置窗口的百分比为像素。

但现在我想计算高度和宽度，例如:

left: @width-80 + @height-10 + "px";

或者:

left: ~"@{width-80 + @height-10}px";

第一个不起作用，因为它在 value 和 px 之间放置了一个空格

第二个无法编译，我尝试了一些变体，但没有成功。

.

第二个问题是我想用它做一个函数，而不是定义每个百分比，我试过这个:

.winheight (@percentage){
   height: (@winheight / 100) * @percentage;
}

但是当我在某个类中尝试这个时:

.winheight(10)

我得到一个错误基本上我想要的只是以某种方式返回一个值，例如:

@win_height_perc(@perc):  (@winheight / 100) * @perc;

不必为 height:、width:、top:、left: 定义单独的函数>

(我正在使用 less.watch() 更新 $(window).resize 以顺便更新像素/百分比)

Answer 1

要解决您的第一个问题，您可以使用:

left: @width-80 + @height-10 + 0px;

或

left: unit(@width-80 + @height-10, px);

调用 .winheight 混合宏时会出现什么错误？它应该工作正常(至少在 Less 样式表中定义的静态变量)。它可能会因其他因素而失败，因为您的 @winheight 取决于动态 DOM 值(不保证对 DOM 的访问)。在任何情况下，如果您希望它被视为百分比，您应该使用 % 单位来调用它:

.winheight(100%)

在 Less 1.7 中，将编译:

left: ~"@{width-80 + @height-10}px"

但只会打印生成无效 CSS 的字符串:

left: @{width-80 + @height-10}px