减:高度和宽度百分比为像素，并将它们相加

Question

在“较少”中，我有以下几点定义：

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

@winheight来自：

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

(宽度相同)

现在我可以用：

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

将窗口的percentage设置为pixels。

但现在我想计算一个高度和宽度如下：

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:定义单独的函数

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

Answer 1

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

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

或

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

当您调用您的.winheight混音时，您会得到什么错误？它应该工作得很好(至少对在较少样式表中定义的静态变量是这样的)。它可能会失败，这取决于其他因素，因为您的@winheight依赖于动态DOM值(对DOM的访问没有保证)。在任何情况下，如果希望将其作为百分比处理，则应该使用%单元调用它：

.winheight(100%)

在减1.7中，这将汇编：

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

但只需打印生成无效CSS的字符串：

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