Question

是否可以在{LESS（less-css）中+=（加上相等）字符串？

我正在尝试创建一个扩展字符串的循环。

特别是我正在尝试创建一个mixin （无内联JS），可以在[{1}}

中向transform添加供应商前缀

基本的循环

transition-propery

prop循环（重复循环以解决变量覆盖）

// for-loop
// works with two integers or a list
.for(@i;@n) when     (@i <= @n)     {.-each(@i);}
.for(@n)    when not (isnumber(@n)) {.for(1;length(@n));}
.for(@i;@n) when not (@i = @n)      {.for(@i + 1;@n);}

过渡属性

// prop-loop
// works with two integers or a list
.prop(@in;@n) when     (@in <= @n)   {.-prop(@in);}
.prop(@n)    when not (isnumber(@n)) {.prop(1;length(@n));}
.prop(@in;@n) when not (@in = @n)    {.prop(@in + 1;@n);}

当然上面的例子不起作用它只返回最后一个值

如果我尝试这样的话：

.transition-property(@values) {

    @vendorPrefixes: -webkit-, -moz-, -o-, ' ';
    // http://caniuse.com/#search=transition
    // http://caniuse.com/#search=transform
    .for(@vendorPrefixes);.-each(@i) {
        @vendorPrefix: e(extract(@vendorPrefixes, @i));
        .prop(@values);.-prop(@in) {
            @value: e(extract(@values, @in));
            .-call(@v) when (@v = transform){
                @prop: e('@{vendorPrefix}@{v}');
            }
            .-call(@v) when not (@v = transform){
                @prop: @v;
            }
        @propList: @prop;
        .-call(@value);
        }
        @{vendorPrefix}transition-property: @propList;
    }
}

我得到@prop: ''; @propList: @propList @prop;

如果我只使用一个属性就可以了。只使用没有任何前缀的多个值也不是问题（需要不同的mixin结构）。

所以真正缺少的是一个允许扩展现有字符串（关键字列表）的运算符

任何想法如何让它在没有inline-js的情况下工作表示赞赏。

原因：我目前正在尝试使用 less 1.6.x 来创建一个没有所有内联javaScript的类似帽子的库，

TESTS

SyntaxError: Recursive variable definition for @propList

目标

.transition-prop-transform {
// works
    .transition-property(transform;);
}
.transition-prop-mutli-with-transform { 
// fails: only return the last value (height)
    .transition-property(transform, color, height;);
}
.transition-prop { 
// works
    .transition-property(height;);
}
.transition-multi { 
// fails: only return the last value (color)
// works with a different mixin
    .transition-property(height, width, color;);
}

Answer 1

要回答问题本身，是的，对于“右侧值”，可以通过转义字符串进行连接，例如：

@a: foo;
@b: bar;
@c: baz;

.concat {
    1: ~'@{a}@{b}';
    2: e('@{b}@{c}');
}

Answer 2

见上面的评论：
来自此答案的帮助： Less js: Mixin property as an argument of another mixin?

我能够让它工作

线索是添加“+”property+: value;

最终守则（涵盖上述所有测试）

.transition-property(@values) {

    @vendorPrefixes: -webkit-, -moz-, -o-, ~'';
    // http://caniuse.com/#search=transition
    // http://caniuse.com/#search=transform
    .for(@vendorPrefixes);.-each(@i) {
        @vendorPrefix: extract(@vendorPrefixes, @i);
        .prop(@values);.-prop(@in) {
            @value: e(extract(@values, @in));
            .-true() {@{vendorPrefix}transition-property+: ~'@{vendorPrefix}@{value}';}
            .-false() {@{vendorPrefix}transition-property+: @value;}
            .-call(transform) {.-true;}
            .-call(box-shadow){.-true;}
            .-call(...) when (default()){.-false;}
            .-call(@value);
        }

    }
}

更新

（出口混合）

// for-loop
// works with two integers or a list
.for(@i;@n) when     (@i <= @n)     {.-each(@i);}
.for(@n)    when not (isnumber(@n)) {.for(1;length(@n));}
.for(@i;@n) when not (@i = @n)      {.for(@i + 1;@n);}

// prop-loop
// loop through values for vendor-prefixing
.prop(@p;@in;@n) when     (@in <= @n)    {.-vendor(@p;@in);}
.prop(@p;@n)     when not (isnumber(@n)) {.prop(@p;1;length(@n));}
.prop(@p;@in;@n) when not (@in = @n)     {.prop(@p;@in + 1;@n);}

// prefix properties
.-vendor(@prop;@in) {
    @value: e(extract(@values, @in));
    .-true() {@{vendorPrefix}@{prop}+: ~'@{vendorPrefix}@{value}';}
    .-false() {@{vendorPrefix}@{prop}+: @value;}
    .-call(transform) {.-true;}
    .-call(box-shadow){.-true;}
    .-call(...) when (default()){.-false;}
    .-call(@value);
}

.transition-property(@values) {
    @vendorPrefixes: -webkit-, -moz-, -o-, ~'';
    // http://caniuse.com/#search=transition
    // http://caniuse.com/#search=transform
    .for(@vendorPrefixes);.-each(@i) {
        @vendorPrefix: extract(@vendorPrefixes, @i);
        .prop(transition-property;@values);
    }
}

更新

这是使用@ seven-phases-max（连接变量）建议的方法的另一个例子（更高级）。 content: '@{a} @{b}'

LESS：

https://github.com/pixelass/more-or-less/blob/master/examples/less/animaless/animaless.less

演示：

http://pixelass.github.io/more-or-less/examples/animaless.html

少＆＃39; + =＆＃39;字符串lessjs 1.6.x