2

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

4

3 回答 3

3

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

于 2014-06-03T14:40:16.053 回答
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;
}
于 2013-10-13T12:20:42.633 回答
1

更紧凑

我将使用 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 交互的内联功能。

于 2013-10-15T16:44:05.113 回答