css - 在 LESS 中，是否可以访问输入变量的第三个数字？

Question

我正在阅读 LESS 页面上的第一个示例

 @base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

上面的代码会生成类似的东西

box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

对于@style 变量，如果我想使用 box-shadow: 0 0 5px 和 0 0 (5+5)px，而不需要另一个 @style2 作为变量输入怎么办。

在 LESS 中，@style 有类似 indexAt 的东西吗？做类似的事情@style.at(3)+5

预期输出:

.test {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

Answer 1

手动(但必须都是相同的输出)

仅使用您当前的 mixin 代码，您可以通过这种方式添加:

少

.test {.box-shadow(0 0 unit(5+5, px), 30%)}

产生:

CSS 输出

.test {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

自动使用 LESS 1.3.2+(困惑且困难)

我已经修改了 mixin 来做一些 javascript 评估并得到你想要的。但是，我不是正则表达式专家，从技术上讲也不是 javascript 专家(只知道足够绕过)，所以可能有一种更简洁的方法来做我正在做的事情，也可能有一种更通用的使用方法。在我这里的解决方案中，它要求你给它一个三属性 @style 字符串，最后一个以 px 值(所以它不是很灵活，但符合您对此处问题的确切规范)。显然，下面的 LESS 1.4.0 代码比这个更好，但在它结束测试之前，一些人(也许你)可能需要更像下面这样的东西:

少

.box-shadow(@style, @c) when (iscolor(@c)) {
  @firstTwoParams: ~`(function() {
    var makeArray = "@{style}".replace(/^\[/,'').replace(/\]$/,'').split(',');
    return (makeArray[0]+makeArray[1]);
  })()`;
  @thirdParam: unit(~`(function() {
    var makeArray = "@{style}".replace(/^\[/,'').replace(/\]$/,'').split(',');
    return makeArray[2];
  })()`, px);
  @resetStyle: @firstTwoParams (@thirdParam+5);
  box-shadow:         @style @c;
  -webkit-box-shadow: @resetStyle @c;
  -moz-box-shadow:    @style @c;
}

CSS 输出 与下面的 LESS 1.4.0 代码答案相同。

自动使用 LESS 1.4.0(干净简单)

根据评论的期望输出进行编辑

在 LESS 的最新版本(目前是 beta，1.4.0)中，您可以使用 extract 函数来访问第三个成员，然后自动设置一些东西添加到其中。这是一个重新设计的混入示例(它将使用与您当前拥有的完全相同的调用):

.box-shadow(@style, @c) when (iscolor(@c)) {
  @resetStyle: extract(@style,1) extract(@style,2) (extract(@style,3)+5);
  box-shadow:         @style @c;
  -webkit-box-shadow: @resetStyle @c;
  -moz-box-shadow:    @style @c;
}

所以调用它的 .box div 代码会产生这个:

.box div {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

它已将 5px 添加到您的 5px，因为在新 mixin 的 @resetStyle 变量中设置了常量。