1

我正在研究 LESS 中逗号合并的灵活性，这是一个目前似乎没有解决方案的用例。.foo类有 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) ); 
}
4

1 回答 1

1

最简单的解决方案是将+:for 属性放在 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;
}
于 2015-04-29T08:05:12.160 回答