Less 将mixin调用与“连接”;逗号合并“;

Less 将mixin调用与“连接”;逗号合并“;,less,mixins,less-mixins,Less,Mixins,Less Mixins,我正在调查LESS中的灵活性,这里是一个目前似乎没有解决方案的用例.foo类有两个内部阴影,由语言提供,它们与+符号连接在一起 我试图创建一个可以重新创建内部阴影的mixin(为了简洁起见,这里没有厂商前缀)。我希望+符号也可以应用于mixin调用,但这会产生一个错误。就像在类似的主题中一样,这种操作似乎必须手动进行,而不是使用串联函数提供的自动化能力 为此,请提供继续使用mixin call的任何建议 .foo { 盒影+:插入12px 12px 15px rgba(255255255,0.8

我正在调查LESS中的灵活性,这里是一个目前似乎没有解决方案的用例
.foo
类有两个内部阴影,由语言提供,它们与
+
符号连接在一起

我试图创建一个可以重新创建内部阴影的mixin(为了简洁起见,这里没有厂商前缀)。我希望
+
符号也可以应用于mixin调用,但这会产生一个错误。就像在类似的主题中一样,这种操作似乎必须手动进行,而不是使用串联函数提供的自动化能力

为此,请提供继续使用mixin call的任何建议

.foo
{
盒影+:插入12px 12px 15px rgba(255255255,0.8);
盒影+:插图-12px-12px 15px rgba(0,0,0,0.2);
}
.内部阴影(@x:0,@y:1px,@blur:2px,@spread:0,@rgba颜色:rgba(0,0,0,0.25))
{
框阴影:嵌入@x@y@blur@spread@rgba颜色;
}
.foo2
{
.内阴影+(@x:12px,@y:12px,@blur:15px,@spread:0,@rgba颜色:rgba(255255,0.8));
.内阴影+(@x:-12px,@y:-12px,@blur:15px,@spread:0,@rgba颜色:rgba(0,0,0,0.2));
}

最简单的解决方案是将属性的
+:
放在mixin中,如下所示

这意味着,如果同一个mixin在同一范围内被多次调用,那么来自每个mixin调用的结果值将被连接成一个值。当特定选择器中只有一个mixin调用时,这不会产生任何有害影响

.foo{
盒影+:插入12px 12px 15px rgba(255255255,0.8);
盒影+:插图-12px-12px 15px rgba(0,0,0,0.2);
}
.内部阴影(@x:0,@y:1px,@blur:2px,@spread:0,@rgba颜色:rgba(0,0,0,0.25)){
-webkit box shadow+:嵌入@x@y@blur@spread@rgba颜色;
框阴影+:嵌入@x@y@blur@spread@rgba颜色;
}
.foo2{
.内阴影(@x:12px,@y:12px,@blur:15px,@spread:0,@rgba颜色:rgba(255255,0.8));
内阴影(@x:-12px,@y:-12px,@blur:15px,@spread:0,@rgba颜色:rgba(0,0,0,0.2));
}
.3{
.内阴影(@x:12px,@y:12px,@blur:15px,@spread:0,@rgba颜色:rgba(255255,0.8));
}

注意:只要在同一选择器范围内多次指定同一属性,就会发生连接,因此下面的选择器规则

.foo2{
.内阴影(@x:12px,@y:12px,@blur:15px,@spread:0,@rgba颜色:rgba(255255,0.8));
内阴影(@x:-12px,@y:-12px,@blur:15px,@spread:0,@rgba颜色:rgba(0,0,0,0.2));
长方体阴影+:1px 1px 1px实心红色;
}
将导致所有三个阴影连接在一起,如下所示:

.foo2{
方框阴影:插入12px 12px 15px 0 rgba(255,255,255,0.8),插入-12px-12px 15px 0 rgba(0,0,0,0.2),1px 1px 1px实心红色;
}

@Harry:是的,Harry,请:-)我写这篇文章有两个原因:首先是一个可能的优化解决方案,但除了与社区分享需求之外。如果很多用户有相同的需求,开发团队可以考虑扩展方法,你知道吗?我也这么想。。。。。但我还没有试着调查这件事。LESS中的循环非常混乱……:-达曼。。。。。。这应该是一个很大的限制。。。。。。。。。正是因为这样的原因,我将推动“逗号合并”函数的扩展。它可能非常强大,可以编写代码,但它的实际体现非常基本-(对不起,伙计,我把你完全弄错了方向:(有一个非常简单的答案,我很快会在答案中发布。谢谢,这可能是这个简化案例的完美解决方案,但正如我在问题中所写的,我删除了供应商前缀只是为了简洁,但在实际案例中,它们是存在的。因此,出于在mixin内的属性中添加
+
中解释的相同原因……还不够令人遗憾。)(框阴影的前缀几乎不再是必需的(除非支持非常旧的浏览器版本),但即使在这种情况下,这个示例也应该适用于
-webkit-box-shadow
等。只要属性名称相同,串联就可以工作。哦,是的,你是对的!!!:-)我没有面对这一点,与其他情况不同,这里的财产声明是不同的!!!!谢谢你很高兴帮助mate。我将清除对问题的评论(以减少噪音),并进行一些小的编辑以改进问题。如果你觉得不一样,请随时回滚:)