css – Sass中的多个box-shadow声明

我想为box-shadow属性创建一个Sass mixin，但遇到麻烦。一些现有的代码看起来像这样。

#someDiv {
  -moz-box-shadow:0 0 5px rgba(0,.25);
}

#someOtherDiv {
  -moz-box-shadow:0 0 5px rgba(0,.25) inset;
}

#theLastDiv {
  -moz-box-shadow: 0 0 5px rgba(0,.25),0 1px 0 rgba(255,255,.2) inset;
}

试图将所有这一切卷入1混合物变得有问题。在mixins中使用逻辑的文档相当稀疏。

我想创建一些mixin：

@mixin boxShadow($xOffSet,$yOffSet,$blur,$red,$green,$blue,$opacity,$inset : false) {
  @if $inset == true {
    -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$blue) inset;
  } @else {
    -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$blue);
  }
}

这是抛出错误，因为我猜Sass无法评估$ inset变量。

前面的例子只是说明了当盒子阴影被插入或不插入时我遇到的问题。我遇到的另一个问题是在单个元素上声明多个box-shadows。参考上述的#DastDiv参考。

@mixin boxShadow($declarations : 2,$xOffSet1,$yOffSet1,$blur1,$red1,$green1,$blue1,$opacity1 $xOffSet2,$yOffSet2,$blur2,$red2,$green2,$blue2,$opacity2) {
  @if $declarations == 1 {
    -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$blue);
  } @else if $declarations == 2 {
    -moz-box-shadow: #{$xOffSet1}px #{$yOffSet1}px #{$blur1}px rgba($red1,$blue1),#{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$blue2);
  }

有时一个元素有一个盒子阴影，有时它必须分离盒子阴影。我错误地认为，萨斯缺乏破译这个逻辑的能力，而完成这个逻辑将需要单独的混合(一个用于具有一个盒子阴影的元素，另一个用于具有两个盒子阴影的混合物)。

为了使事情复杂化，上述不透明度问题如何影响？希望得到一些反馈。让我知道，如果我错了，或者我正在考虑这个问题的方式是有缺陷的。谢谢！

解决方法

我更喜欢保留基本的CSS参数，不带逗号：0 0 1px rgba(0，0，0，.5)，而不是逗号：0,5,10,0.25。

这是我的解决方案：

@mixin box-shadow($shadow1,$shadow2:false,$shadow3:false,$shadow4:false,$shadow5:false) {
 $params: $shadow1;
  @if $shadow2 
    { $params: $shadow1,$shadow2; }
    @if $shadow3 != false
      { $params: $shadow1,$shadow2,$shadow3; }
      @if $shadow4 != false
        { $params: $shadow1,$shadow3,$shadow4; }
        @if $shadow5 != false
          { $params: $shadow1,$shadow4,$shadow5; }

  -webkit-box-shadow: $params;
     -moz-box-shadow: $params;
          box-shadow: $params;

}

@include box-shadow(-1px -1px 2px rgba(0,.05),0 1px 1px white inset),...