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

Question

3

在 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 以更新像素/百分比）

- TrySpace

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- helderdarocha · Accepted Answer

要解决你的第一个问题，你可以使用以下代码：

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

或者

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

当您调用.winheight mixin时，出现了什么错误？它应该可以正常工作（至少在Less样式表中定义静态变量时可以）。它可能会因其他因素而失败，因为@winheight取决于动态DOM值（无法保证访问DOM）。无论如何，如果您希望将其视为百分比处理，则应使用%单位进行调用。

.winheight(100%)

在Less 1.7中，这段代码将会编译：

In Less 1.7 this will compile:

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

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

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