3

我正在阅读 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);
}
4

2 回答 2

2

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

仅使用当前的 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功能访问第三个成员，然后自动设置一些内容以添加到其中。这是一个重新设计的 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

于 2013-04-07T00:02:44.740 回答
0

对不起，这可能有点粗鲁，但是 ScottS - 看到你对另一个问题的回答，只是知道/希望你可能有我的黄金解决方案...... :-) 所以 ScottS...... 我可以带领你吗在我的问题的方向：CSS / HTML：在浏览器窗口中居中绝对元素，无论父位置（父也是绝对） ......这里有一个问题的例子：

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 保留在视口中（因为位置固定） - 它应该保留在父菜单块中。但是，如果我这样做，我将无法使 div 在浏览器窗口中水平居中：-/

最后但并非最不重要的一点......非常抱歉ttback使用你的问题试图引起ScottS的注意......希望你能原谅我......

于 2013-04-09T04:50:55.430 回答