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

UPDATE

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

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

Answer 2

我更喜欢保留基本的CSS参数而不用逗号:0 0 1px rgba(0, 0, 0, .5)而不是使用逗号:0, 0, 5, 0, 0, 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, $shadow2, $shadow3, $shadow4; }
        @if $shadow5 != false
          { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5; }

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

}

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

Answer 3

您可以使用集合,只有一个参数:

@mixin box-shadow($params) {
  -webkit-box-shadow: $params;
  -moz-box-shadow: $params;
  box-shadow: $params;
}

$shadows: 0px 0px 5px rgba(0, 0, 0, 0.25), 0px 1px 0px #000 inset;

.myclass { 
   @include box-shadow($shadows);
}

Answer 4

我添加了一些逻辑来处理您所描述的情况。这是混合：

@mixin boxShadow($xOffSet, $yOffSet, $blur, $red, $green, $blue, $opacity, $inset : false, $two : false, $xOffSet2 : 0, $yOffSet2 : 0, $blur2 : 0, $red2 : 0, $green2 : 0, $blue2 : 0, $opacity2 : 0, $inset2 : false) {
  @if $inset {
    @if $two {
        @if $inset2 {
            -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity) inset, #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2, $opacity2) inset;
        } @else {
            -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity) inset, #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2, $opacity2);
        }
    } @else {
        -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity) inset;
    }
  } @else {
    @if $two {
        @if $inset2 {
            -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity), #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2, $opacity2) inset;
        } @else {
            -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity), #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2, $opacity2);
        }
    } @else {
        -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity);
    }
  }
}

mixin 有 17 个参数。抱歉有这么多，但 SASS 不处理数组或对象。无论如何，10 个是可选的。他们是：

1. $xOffSet - 第一个阴影的 x 偏移量
2. $yOffSet - 第二个阴影的 y 偏移量
3. $blur - 第一个阴影的模糊
4. $red - 第一个阴影的红色值
5. $blue - 第一个阴影的蓝色值
6. $green - 第一个阴影的绿色值
7. $opacity - 第一个阴影的不透明度
8. $inset（可选）- True 或 False。指示是否应插入第一个阴影（默认为 false）
9. $two （可选）- True 或 False - 如果要定义两个边框则为 True（默认为 false）
10. $xOffSet2 (可选) - 第二个阴影的 x 偏移量
11. $yOffSet2 (可选) - 第二个阴影的 y 偏移量
12. $blur2 (可选) - 第二个阴影的模糊
13. $red2 (可选)-第二个阴影的红色值
14. $blue2 (可选) - 第二个阴影的蓝色值
15. $green2 (可选) - 第二个阴影的绿色值
16. $opacity2 (可选) - 第二个阴影的不透明度
17. $inset2（可选）- True 或 False。指示是否应插入第二个阴影（默认为 false）

你可以这样设置你的样式：

#someDiv {
    @include boxShadow(0, 0, 5, 0, 0, 0, .25);
}
#someOtherDiv {
    @include boxShadow(0, 0, 5, 0, 0, 0, .25, true);
}

#theLastDiv {
    @include boxShadow(0, 0, 5, 0, 0, 0, .25, false, true, 0, 1, 0, 255, 255, 255, .2, true);
}

生成以下 CSS：

/* line 9, ../src/screen.scss */
#someDiv {
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}

/* line 12, ../src/screen.scss */
#someOtherDiv {
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25) inset;
}

/* line 16, ../src/screen.scss */
#theLastDiv {
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25), 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
}