Question

In Less我已经定义了这些：

@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()以更新像素/百分比btw）

Answer 1

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

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

或

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

拨打.winheight mixin时会出现什么错误？它应该工作正常（至少使用Less stylesheet中定义的静态变量）。它可能会失败，具体取决于其他因素，因为您的@winheight依赖于动态DOM值（无法保证对DOM的访问）。在任何情况下，如果您希望将其视为百分比，则应使用%单位调用它：

.winheight(100%)

在Less 1.7中，将编译：

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

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

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

较少：身高＆amp;宽度百分比与像素，并将它们相加

1 个答案: