Sass中的多个框阴影声明-Multiplebox-shadowdeclarationsinSass

19  

You can use a variable argument like this:

你可以使用这样的变量参数：

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

That allows you to have commas in the argument passed. so you can pass all the shadows you want.

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

An example using it:

使用它的一个例子：

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

Pass in color variables like this:

传入这样的颜色变量：

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

UPDATE

UPDATE

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

In case you haven't seen arguments with the elipsis allowing a variable number of arguments before (ie splats) check this link: http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#variable_keyword_arguments

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

18  

I prefer to keep basic CSS parameter without commas: 0 0 1px rgba(0, 0, 0, .5) rather than with commas: 0, 0, 5, 0, 0, 0, .25.

我更喜欢保留没有逗号的基本CSS参数：0 0 1px rgba（0,0,0，.5）而不是逗号：0,0,5,0,0,0，.25。

This is my solution:

这是我的解决方案：

@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), ...

5  

You could use collections and only have one parameter:

您可以使用集合，只有一个参数：

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

4  

I've added a bit of logic to handle the cases you described. Here is the mixin:

我添加了一些逻辑来处理你描述的情况。这是mixin：

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

The mixin takes 17 parameters. Sorry for having so many, but SASS does not handle arrays or objects. In any event, 10 are optional. They are:

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

1. $xOffSet - the x offset of the first shadow
2. $ xOffSet - 第一个阴影的x偏移量
3. $yOffSet - the y offset of the second shadow
4. $ yOffSet - 第二个阴影的y偏移量
5. $blur - the blur of the first shadow
6. $ blur - 第一个阴影的模糊
7. $red - the red value of the first shadow
8. $ red - 第一个阴影的红色值
9. $blue - the blue value of the first shadow
10. $ blue - 第一个阴影的蓝色值
11. $green - the green value of the first shadow
12. $ green - 第一个阴影的绿色值
13. $opacity - the opacity of the first shadow
14. $ opacity - 第一个阴影的不透明度
15. $inset (Optional) - True or False. Indicates if the first shadow should be inset (defaults to false)
16. $ inset（可选） - 对或错。指示是否应插入第一个阴影（默认为false）
17. $two (Optional) - True or False - True if you want to define two borders (defaults to false)
18. $ two（可选） - True或False - 如果要定义两个边框，则为True（默认为false）
19. $xOffSet2 (Optional) - the x offset of the second shadow
20. $ xOffSet2（可选） - 第二个阴影的x偏移量
21. $yOffSet2 (Optional) - the y offset of the second shadow
22. $ yOffSet2（可选） - 第二个阴影的y偏移量
23. $blur2 (Optional) - the blur of the second shadow
24. $ blur2（可选） - 第二个阴影的模糊
25. $red2 (Optional)- the red value of the second shadow
26. $ red2（可选） - 第二个阴影的红色值
27. $blue2 (Optional) - the blue value of the second shadow
28. $ blue2（可选） - 第二个阴影的蓝色值
29. $green2 (Optional) - the green value of the second shadow
30. $ green2（可选） - 第二个阴影的绿色值
31. $opacity2 (Optional) - the opacity of the second shadow
32. $ opacity2（可选） - 第二个阴影的不透明度
33. $inset2 (Optional) - True or False. Indicates if the second shadow should be inset (defaults to false)
34. $ inset2（可选） - 正确还是错误。指示是否应插入第二个阴影（默认为false）

You could set your styles like this:

您可以像这样设置样式：

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

Which generates the following CSS:

哪个生成以下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;
}

0  

Compass code might be worth studying:

指南针代码可能值得研究：

However, they seem to use some server side helpers as well.

但是，他们似乎也使用了一些服务器端助手。

@mixin box-shadow(
  $shadow-1 : default,
  $shadow-2 : false,
  $shadow-3 : false,
  $shadow-4 : false,
  $shadow-5 : false,
  $shadow-6 : false,
  $shadow-7 : false,
  $shadow-8 : false,
  $shadow-9 : false,
  $shadow-10: false
) {
  @if $shadow-1 == default {
    $shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
  }
  $shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
  @include experimental(box-shadow, $shadow,
    -moz, -webkit, not -o, not -ms, not -khtml, official
  );
}