Sass 中的多个 box-shadow 声明

Posted 2023-03-07

【中文标题】Sass 中的多个 box-shadow 声明

【英文标题】：Multiple box-shadow declarations in Sass

【发布时间】：2011-07-21 09:54:36

【问题描述】：

我想为 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: #$xOffSetpx #$yOffSetpx #$blurpx rgba($red,$green,$blue) inset;
   @else 
    -moz-box-shadow: #$xOffSetpx #$yOffSetpx #$blurpx rgba($red,$green,$blue);
  

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

前面的例子只演示了我在 box-shadow 是否插入时遇到的问题。我遇到的另一个问题是在单个元素上声明了多个框阴影。如需参考，请参阅上述#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: #$xOffSetpx #$yOffSetpx #$blurpx rgba($red,$green,$blue);
   @else if $declarations == 2 
    -moz-box-shadow: #$xOffSet1px #$yOffSet1px #$blur1px rgba($red1,$green1,$blue1), #$xOffSet2px #$yOffSet2px #$blur2px rgba($red2,$green2,$blue2);
  

有时一个元素有一个盒子阴影，而其他时候它必须分开盒子阴影。我误会了，Sass 缺乏破译此逻辑的能力，并且要实现这一点需要单独的 Mixins（一个用于具有一个框阴影的元素，另一个用于具有两个框阴影的 mixins）。

更复杂的是，上面描述的不透明问题是如何影响到这一点的？很想得到一些反馈。如果我弄错了，或者我思考问题的方式总体上存在缺陷，请告诉我。谢谢！

【参考方案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

【讨论】：

如何在使用这种方法时传递变量？ @include(1px 1px 1px $backgroundColor) 似乎不起作用？

其实看看你放在那里的东西，你错过了mixin的名字。

对不起 - @include box-shadow(0 0 3px $yellow);正在返回一个 CSS 定义，其中包含颜色字符串“$yellow”，而不是 $yellow 中的值；

你是如何定义 $yellow 的？这给了我闪亮的太阳色边框： $yellow : #f2e00f; @include box-shadow(0 0px 20px $黄色); :)

省略号使它成为一个 splat 参数 - splats 允许可变数量的参数。这是一个 ruby​​ 概念，已经传播到 coffeescript 和 sass。 @VolkerE。 - 见sass-lang.com/documentation/…

【参考方案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), ...

【讨论】：

比17个参数好多了。谢谢！

尽管使用此解决方案，您可以拥有的阴影数量受限于参数数量（在本例中为 5 个阴影）。 Will's 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);

【参考方案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: #$xOffSetpx #$yOffSetpx #$blurpx rgba($red,$green,$blue, $opacity) inset, #$xOffSet2px #$yOffSet2px #$blur2px rgba($red2,$green2,$blue2, $opacity2) inset;
         @else 
            -moz-box-shadow: #$xOffSetpx #$yOffSetpx #$blurpx rgba($red,$green,$blue, $opacity) inset, #$xOffSet2px #$yOffSet2px #$blur2px rgba($red2,$green2,$blue2, $opacity2);
        
     @else 
        -moz-box-shadow: #$xOffSetpx #$yOffSetpx #$blurpx rgba($red,$green,$blue, $opacity) inset;
    
   @else 
    @if $two 
        @if $inset2 
            -moz-box-shadow: #$xOffSetpx #$yOffSetpx #$blurpx rgba($red,$green,$blue, $opacity), #$xOffSet2px #$yOffSet2px #$blur2px rgba($red2,$green2,$blue2, $opacity2) inset;
         @else 
            -moz-box-shadow: #$xOffSetpx #$yOffSetpx #$blurpx rgba($red,$green,$blue, $opacity), #$xOffSet2px #$yOffSet2px #$blur2px rgba($red2,$green2,$blue2, $opacity2);
        
     @else 
        -moz-box-shadow: #$xOffSetpx #$yOffSetpx #$blurpx rgba($red,$green,$blue, $opacity);
    
  

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

$xOffSet - 第一个阴影的 x 偏移量 $yOffSet - 第二个阴影的 y 偏移量 $blur - 第一个阴影的模糊 $red - 第一个阴影的红色值 $blue - 第一个阴影的蓝色值 $green - 第一个阴影的绿色值 $opacity - 第一个阴影的不透明度 $inset（可选）- 真或假。指示是否应插入第一个阴影（默认为 false） $two（可选）- True 或 False - 如果要定义两个边框则为 True（默认为 false） $xOffSet2 (可选) - 第二个阴影的 x 偏移量 $yOffSet2 (可选) - 第二个阴影的 y 偏移量 $blur2 (可选) - 第二个阴影的模糊 $red2（可选）- 第二个阴影的红色值 $blue2 (可选) - 第二个阴影的蓝色值 $green2 (可选) - 第二个阴影的绿色值 $opacity2 (可选) - 第二个阴影的不透明度 $inset2（可选）- 真或假。指示是否应插入第二个阴影（默认为 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;

【讨论】：

是的。在我发布问题后不久，我构建了一些几乎相同的东西。真的很不幸，在 SASS 中没有更好的方法来构建这样的东西。如果 SASS 为它添加了一些连接类型的功能，那就很有趣了。也许这要求太多了。

【参考方案5】：

指南针代码可能值得studying：

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

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

【参考方案6】：

我在主题化 sass 时遇到了同样的问题（参考：How to properly generate Sass Themes）。

我通过使用 box-shadow 的变量然后在代码中使用该变量来解决这个问题：

$btn-shadow-light: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
$btn-shadow-dark: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 2px 4px;
$themes: (
  light: (
    color: rgba(55, 53, 47, 0.6),
    fill: rgba(55, 53, 47, 0.6),
    background: rgba(55, 53, 47, 0.08),
    floating-btn-shadow: $btn-shadow-light,
  ),
  dark: (
    color: rgba(255, 255, 255, 0.6),
    fill: rgba(255, 255, 255, 0.6),
    background: rgb(71, 76, 80),
    floating-btn-shadow: $btn-shadow-dark,
  ),
);