Question

我正在调查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) ); 
}

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

连接mixins调用“逗号合并”

1 个答案: