在LESS中更改可见性时变量会变换

Question

所以我试图让class2继续。我试图这样做的原因是使用这个片段来使用阴影：

.box-shadow(@shadowA, @shadowB:X, ...){
    @props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
    -webkit-box-shadow: @props;
       -moz-box-shadow: @props;
         -o-box-shadow: @props;
            box-shadow: @props;
}

但上面的这个片段只是解释为什么我一般发布这个。

问题是为什么.class和.class2不一样？

您可以使用dopefly's LESS converter to check it out

.class{
 .f1(a,b,c,d);
}


.f1(@t1, @t2:X,...){
 @props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
 background: @props;
}




.class2{
 .f2(a,b,c,d);
}
.f2(@t1, @t2:X,...){
 .f2helper(@arguments);
 background: @props;
}

.f2helper(@t1, @t2:X,...){
 @props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
}

它顺便说一句：

.class {
  background: a, b, c, d;
}
.class2 {
  background: a b c d;
}

奖金问题：替换没有在LESS的可用内置函数定义中列出 - 那么真正提供了哪些函数集？

Answer 1

首先，更好的方式？

您不再需要使用内联javascript来获取道具。顺便说一句，Javascript是replace函数的内容......它不是内置的LESS函数，但是LESS可以访问javascript环境，就像你提供的代码使用反引号一样（{{1标记。

这样做，假设你需要两个特别命名的变量，然后是一个最终变量来捕获所有其他列表项。请注意在调用中使用分号`作为参数分隔符; mixin。这会导致最终的.f1逗号分隔列表被解释为：

@props

如果您不需要单独调用前两个变量（或者不希望设置默认值），那么这可行：

.f1(@t1, @t2:X, @props){
 background: @t1, @t2, @props;
}

.class{
 .f1(a; b; c, d;);
}

第二，关于为什么差异

我相信为什么这两个功能不相同是因为这个电话：

.f1(@props){
 background: @props;
}

.class{
 .f1(a, b, c, d;);
}

结束将一系列参数作为单个参数传递给.f2helper(@arguments); ，然后不会在（你认为是）单独的参数之间插入逗号，而.f2helper 1}} mixin正在处理传递给它的多个参数作为多个参数并在它们之间插入逗号。

Answer 2

变量的值（例如@arguments）永远不会被解释为mixin参数列表，它总是作为一个参数传递。好吧，如果你为每个mixin打印出@arguments的值，会更容易看到会发生什么：

.class {
    .f1(a, b, c, d);
}

.f1(@t1, @t2: X, ...) {
    args: @arguments; // here you have four parameters, js: [a, b, c, d]
}

.class2 {
    .f2(a, b, c, d);
}
.f2(@t1, @t2: X, ...) {
    .f2helper(@arguments);
}

.f2helper(@t1, @t2: X, ...) {
    args: @arguments; // here you have two parameters, js: [a b c d, X]
}

结果：

.class {
  args: a b c d;
}
.class2 {
  args: a b c d X;
}

即。你的正则表达式不能像你期望的那样在.f2中工作。

---

正如@ScottS所提到的那样，在LESS中这样的黑客攻击不再有意义，因为你可以这样做：

.box-shadow(@value) {
    box-shadow: @value;
}

test {
    .box-shadow(a, b, c, d;); // notice ';' at the end of parameters
}

结果：

test {
    box-shadow: a, b, c, d;
}

有关详细信息，请参阅Parametric Mixins。

---

  

那么真正提供了哪些功能集？

请参阅Functions。