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代码，您可以通过以下方式获得添加：

<强> LESS

.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代码比这更好，但是在测试结束之前，有些人（也许你）可能需要更像下面这样的代码：

<强> LESS

.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功能访问第三个成员，然后自动设置一些内容添加到其中。以下是重新设计的mixin的示例（它将使用与您当前完全相同的调用）：

.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);
}

由于新mixin中5px变量设置了常量，因此5px已添加@resetStyle。

Answer 2

对不起，这有点粗鲁，也许，但ScottS - 看到了你对另一个问题的回答，只是知道/希望你可能有我的黄金解决方案...... :-)所以ScottS ......我可以吗？也许会引导你走向我的问题：CSS / HTML: centering absolute element in browser window regardles of parent position (parent also absolute) ...这里有一个问题的例子：

http://jsfiddle.net/Nhd8y/4/ ...

#megamenuShops li:hover .dropdown_1column_shop {

    left: calc(50% - 400px);
    left: -moz-calc(50% - 400px);
  left: -webkit-calc(50% - 400px);
    position:fixed;

  top:inherit;
}

onmouseover上显示的div在向下滚动时停留在视口中（因为固定位置） - 它应该保留在父菜单块中。但是，如果我这样做，我无法在浏览器窗口中水平居中： - /

最后但并非最不重要的......很多道歉使用你的问题试图引起ScottS的注意...希望你能原谅我......

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

2 个答案:

手动（但必须都是相同的输出）

自动使用LESS 1.3.2+（凌乱和困难）

自动使用LESS 1.4.0（清洁且简单）