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

Question

如何在 Less 中获得两个值的最大值或最小值。就像 JavaScript 中的 Math.min() 或 Math.max() 一样。我认为这对于在你的 mixins 中使用会很有用。

Answer 1

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

• 分钟（）
• 最大限度（）

Answer 2

未来版本计划使用更少的 min/max 内置函数，请参阅：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 3

更紧凑

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

较少的

.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 交互的内联功能。