css – Sass中的多个box-shadow声明

前端之家收集整理的这篇文章主要介绍了css – Sass中的多个box-shadow声明前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想为Box-shadow属性创建一个Sass mixin,但遇到麻烦。一些现有的代码看起来像这样。
#someDiv {
  -moz-Box-shadow:0 0 5px rgba(0,.25);
}

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

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

试图将所有这一切卷入1混合物变得有问题。在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,$blue) inset;
  } @else {
    -moz-Box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$blue);
  }
}

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

前面的例子只是说明了当盒子阴影被插入或不插入时我遇到的问题。我遇到的另一个问题是在单个元素上声明多个Box-shadows。参考上述的#DastDiv参考。

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

有时一个元素有一个盒子阴影,有时它必须分离盒子阴影。我错误地认为,萨斯缺乏破译这个逻辑的能力,而完成这个逻辑将需要单独的混合(一个用于具有一个盒子阴影的元素,另一个用于具有两个盒子阴影的混合物)。

为了使事情复杂化,上述不透明度问题如何影响?希望得到一些反馈。让我知道,如果我错了,或者我正在考虑这个问题的方式是有缺陷的。谢谢!

解决方法

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

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

}

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

猜你在找的CSS相关文章