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