使用 "comma merging" 连接 mixins 调用

Question

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

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

请提供任何建议以继续为此目的使用 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) ); 
}

Answer 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;
}

使用 "comma merging" 连接 mixins 调用

Concatenate mixins call with "comma merging"

mixins

less

less-mixins