Question

我想要计算下面的代码，并为font-size / height属性分配值。在这里我想根据可用屏幕max-height的最大值和计算值（假设像height属性的计算一样设置属性的值（比如说height））。有没有办法在LESS中这样做？我尝试使用max函数，但它似乎无法正常工作。

此外，为了将px / em等分配给该值，在其中一个线程中提到可以使用0em +变量值来完成。但有没有更好看的方式来做到这一点？我试着像下面代码中显示的第二种方式，但它不起作用。

这里提到的用例可能听起来很愚蠢，但实际情况有所不同，我只是为了简单起见就这样说了。

.def(@fSize){
  @defHeight: 100px; // Need this to be screen width
  font-size: 0em + @fSize;
  line-height: 0px + (1.5*@fSize); 
  height: 0px + (15*@fSize); // Works fine
  //height: ~"15*@{fSize}px"; // Just prints 15*1px
  max-height: max(@defHeight, @fSize) // doesn't work
}

div#demo{
  .def(1);
}

Answer 1

那里有多个问题，所以会逐一回答。

是的，您可以像使用window.screen.availWidth的普通JavaScript一样获得可用的屏幕高度。在反引号中提供时，LESS支持Javascript语句。
要获得两个值中的最大值，您可以在Less max()中使用内置max(@var1, @var2)函数。在此@var1和@var2中有两个值用于比较。请注意，两者应位于同一单元中进行比较。如果不是，它只会输出max(val1, val2)作为输出（这就是你的情况）。
对于分配单位，这是早期版本LESS的方法之一。现在它有一个名为unit()的内置函数，可以像unit(@var,px)一样使用。这个函数实际上和~"15*@{fSize}px"几乎一样（注意引号内的反引号，这就是你的第二个高度属性不起作用的原因）。

总的来说，您的代码可以按如下方式完成：

15*@{fSize}

已编译的输出：

.def(@fSize){
  @defHeight: `window.screen.availHeight`; //This is for getting screen width
  font-size: unit(@fSize, em); // The following are for assigning the units
  line-height: unit(1.5*@fSize,px);
  height: unit(15*@fSize,px);
  max-height: max(unit(@defHeight,px),unit(15*@fSize,px)) // This is for comparison
}

div#demo{
  .def(1);
}

获取屏幕宽度并计算最大值

1 个答案: