使用“逗号合并”连接 mixins 调用答案

【问题标题】：Concatenate mixins call with "comma merging"使用“逗号合并”连接 mixins 调用
【发布时间】：2015-04-29 07:28:08
【问题描述】：

我正在研究 LESS 中 comma merging 的灵活性，这是一个目前似乎没有解决方案的用例。 .foo 类有 2 个与 + 符号连接的内阴影，由语言提供。

我尝试创建一个可以重新创建内部阴影的 mixin（为简洁起见，这里没有供应商前缀）。我希望 + 符号也可以应用于 mixins 调用，但这会产生错误。就像another question of mine 中的类似主题一样，似乎这种操作必须手动进行，而不是使用连接函数提供的自动化功能。

请提供任何建议以继续为此目的使用 mixin 调用。

.foo
{
  box-shadow+: inset  12px  12px 15px rgba(255,255,255,0.8);
  box-shadow+: inset -12px -12px 15px rgba(0,0,0,0.2);
}

.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @rgba-color: rgba(0, 0, 0, 0.25) ) 
{
  box-shadow:inset @x @y @blur @spread @rgba-color;
}

.foo2
{
  .inner-shadow+ (@x: 12px, @y: 12px, @blur: 15px, @spread: 0, @rgba-color: rgba(255,255,255,0.8) );
  .inner-shadow+ (@x: -12px, @y: -12px, @blur: 15px, @spread: 0, @rgba-color: rgba(0,0,0,0.2) ); 
}

【问题讨论】：

@Harry：是的，Harry，拜托 :-) 我在这里写这个有两个原因：首先是一个可能的优化解决方案，但除了与社区分享需求。也许如果很多用户有相同的需求，开发团队可以考虑扩展方法。
你知道吗？我也是这么想的……但我还没有试图研究这个。 LESS 中的循环是如此令人困惑.... :-D
该死......这应该是一个很大的限制............正是出于这种原因，我会推动“逗号合并”功能的扩展。它可能非常非常强大，准备好代码，但它的实际化身是非常基本的...... :-(
对不起，伙计，我把你完全带错了路：（有一个非常简单的答案，我会尽快在答案中发布。

标签： less mixins less-mixins

【解决方案1】：

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

这意味着如果同一个 mixin 在同一作用域内被多次调用，则每个 mixin 调用的结果值将被连接成一个单独的值。当特定选择器中也只有一次 mixin 调用时，这不会产生任何有害影响。

.foo{
  box-shadow+: inset  12px  12px 15px rgba(255,255,255,0.8);
  box-shadow+: inset -12px -12px 15px rgba(0,0,0,0.2);
}

.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @rgba-color: rgba(0, 0, 0, 0.25) ){

  -webkit-box-shadow+:inset @x @y @blur @spread @rgba-color; 
  box-shadow+:inset @x @y @blur @spread @rgba-color;
}

.foo2{
  .inner-shadow(@x: 12px, @y: 12px, @blur: 15px, @spread: 0, @rgba-color: rgba(255,255,255,0.8) );
  .inner-shadow(@x: -12px, @y: -12px, @blur: 15px, @spread: 0, @rgba-color: rgba(0,0,0,0.2) ); 
}
.foo3{
  .inner-shadow(@x: 12px, @y: 12px, @blur: 15px, @spread: 0, @rgba-color: rgba(255,255,255,0.8) );
}

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

.foo2{
  .inner-shadow(@x: 12px, @y: 12px, @blur: 15px, @spread: 0, @rgba-color: rgba(255,255,255,0.8) );
  .inner-shadow(@x: -12px, @y: -12px, @blur: 15px, @spread: 0, @rgba-color: rgba(0,0,0,0.2) ); 
  box-shadow+: 1px 1px 1px solid red;
}

将导致所有三个阴影连接在一起，如下所示：

.foo2 {
  box-shadow: inset 12px 12px 15px 0 rgba(255, 255, 255, 0.8), inset -12px -12px 15px 0 rgba(0, 0, 0, 0.2), 1px 1px 1px solid red;
}

【讨论】：

感谢这可能是这个简化案例的完美解决方案，但正如我在问题中所写的那样，我只是为了简洁而放弃了供应商前缀，但在实际情况下，它们是存在的。所以，出于相同的原因解释在 related question 添加 + 在 mixin 内的属性中......不幸的是:-(
box-shadow 的前缀几乎不再需要（除非支持非常旧的浏览器版本），但即使在这种情况下，这个例子也应该适用于 -webkit-box-shadow 等。只要属性名称是一样的，串联就可以了。
哦，是的，你是对的！！！ :-) 我没有面对，与其他情况不同，这里的属性声明不同！！！！谢谢
总是乐于帮助队友。我将清除问题的 cmets（以减少噪音），并进行一些小的编辑以改进问题。如果您不满意，请随时回滚:)