Sass中的多个框阴影声明

飞云 · 03月23日

我想为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)。

并使问题复杂化的是,上述不透明度问题是如何造成的呢?希望得到一些反馈。一般情况下,请让我知道我是否记错或思考问题的方式。谢谢!

CSSCSS
回答(5)
时间
J
JinJin
5 · 2020-03-23 21:53:45

我添加了一些逻辑来处理您描述的情况。这是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:

  1. $xOffSet - the x offset of the first shadow
  2. $yOffSet - the y offset of the second shadow
  3. $blur - the blur of the first shadow
  4. $red - the red value of the first shadow
  5. $blue - the blue value of the first shadow
  6. $green - the green value of the first shadow
  7. $opacity - the opacity of the first shadow
  8. $inset (Optional) - True or False. Indicates if the first shadow should be inset (defaults to false)
  9. $two (Optional) - True or False - True if you want to define two borders (defaults to false)
  10. $xOffSet2 (Optional) - the x offset of the second shadow
  11. $yOffSet2 (Optional) - the y offset of the second shadow
  12. $blur2 (Optional) - the blur of the second shadow
  13. $red2 (Optional)- the red value of the second shadow
  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;
}
逆天米亚
4 · 2020-03-23 21:53:45

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

@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);
}
T
Tony
3 · 2020-03-23 21:53:45

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

// 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

阳光
2 · 2020-03-23 21:53:45

我更喜欢保留基本的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), ...
M
Mandy斯丁
1 · 2020-03-23 21:53:45

指南针代码可能值得研究

但是,他们似乎也使用一些服务器端帮助程序。

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

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序