是否可以在{LESS(less-css)中+=
(加上相等)字符串?
我正在尝试创建一个扩展字符串的循环。
特别是我正在尝试创建一个mixin (无内联JS),可以在[{1}}
中向transform
添加供应商前缀
transition-propery
// 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的类似帽子的库,
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;);
}
答案 0 :(得分:0)
要回答问题本身,是的,对于“右侧值”,可以通过转义字符串进行连接,例如:
@a: foo;
@b: bar;
@c: baz;
.concat {
1: ~'@{a}@{b}';
2: e('@{b}@{c}');
}
答案 1 :(得分:0)
见上面的评论:
来自此答案的帮助: 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}'
https://github.com/pixelass/more-or-less/blob/master/examples/less/animaless/animaless.less
http://pixelass.github.io/more-or-less/examples/animaless.html