css - Sass 中的多个框阴影声明

Question

我想为 box-shadow 属性创建一个 Sass mixin，但遇到了一些麻烦。一些现有代码如下所示。

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

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

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

试图将所有这些整合到 1 个 mixin 中是有问题的。在 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,$green,$blue) inset;
  } @else {
    -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue);
  }
}

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

前面的示例仅演示了我在插入或不插入框阴影时遇到的问题。我遇到的另一个问题是在单个元素上声明了多个框阴影。如需引用，请参阅上述#theLastDiv。

@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,$green,$blue);
  } @else if $declarations == 2 {
    -moz-box-shadow: #{$xOffSet1}px #{$yOffSet1}px #{$blur1}px rgba($red1,$green1,$blue1), #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2);
  }

有时一个元素有一个盒子阴影，有时它必须分开盒子阴影。我是否误解了 Sass 缺乏破译这种逻辑的能力，而要实现这一点需要单独的 Mixins(一个用于具有一个框阴影的元素，另一个用于具有两个框阴影的 mixins)。

使事情复杂化的是，上述不透明度问题是如何影响这一点的？很想得到一些反馈。让我知道我是否弄错了，或者我对问题的思考方式总体上是有缺陷的。谢谢!

Answer 1

您可以像这样使用可变参数:

// Box shadows
@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
     -moz-box-shadow: $shadow;       
          box-shadow: $shadow;
}

这允许您在传递的参数中使用逗号。这样你就可以通过所有你想要的阴影。

使用示例:

@include box-shadow(2px 2px 2px rgba(#ccc, .8), -2px -2px 2px rgba(#ccc, 0.8)) ;

像这样传入颜色变量:

$shadow-color: red;  // could also be a #F9F8F6 type color
@include box-shadow(0 2px 2px rgba($shadow-color, .9));

更新

$shadow-color: red;  // could also be a hex (like #F9F8F6) type color
@include box-shadow(0 2px 2px rgba($shadow-color, .9));

如果您之前没有看到带有允许可变数量参数的省略号的参数(即 splats)，请查看此链接:http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#variable_keyword_arguments