Question

如何在Less中获得两个值的最大值或最小值。就像javascript中的Math.min（）或Math.max（）一样。我认为这对你的mixin有用。

Answer 1

计划在将来的版本中使用较少的最小/最大内置函数，请参阅：https://github.com/less/less.js/pull/1371。现在你可以尝试，基于https://stackoverflow.com/a/15982103/1596547：

.max(@a,@b)
{
   @max: ~"@{b}px";
}
.max(@a,@b) when (@a>@b)
{
   @max: ~"@{a}px";
}
.max(700,800);

.examplemax{width: @max;}

导致：

.examplemax {
  width: 800px;
}

或

.min(@a,@b)
{
   @min: ~"@{b}px";
}
.min(@a,@b) when (@a<@b)
{
   @min: ~"@{a}px";
}
.min(700,800);

.examplemin{width: @min;}

导致：

.examplemin {
  width: 700px;
}

Answer 2

此功能已在此期间实施。看一下官方的功能参考：

min()
max()

Answer 3

更紧凑

我会使用LESS的内联javascript功能来实现这一点，并为单位增加灵活性（如果需要，可以将其设置为默认值''，以便只返回直号，但在我的示例中默认值为px）。像这样：

<强> LESS

.minmax(@a,@b,@unit:'px') {
  @min: ~"`Math.min(@{a},@{b})`@{unit}";
  @max: ~"`Math.max(@{a},@{b})`@{unit}";
}
.test {
  .minmax(700,800);
  width: @max;
}
.test2 {
  .minmax(50,70,"%");
  width: @min;
}

CSS输出

.test {
  width: 800px;
}
.test2 {
  width: 50%;
}

由于您在问题中引用了javascript函数，或许您并不知道这些可以与LESS交互的内联函数。

在Less中计算两个值的最小值/最大值

3 个答案:

更紧凑