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 にまとめようとすると、問題が生じます。ミックスイン内でロジックを使用するためのドキュメントはかなりまばらです。
次の行に沿ってミックスインを作成したいと思います。
@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 変数を評価できないと思われるため、これはエラーをスローしています。
前の例は、ボックス シャドウが挿入されているかどうかに関して私が抱えている問題を示しているだけです。私が抱えているもう 1 つの問題は、1 つの要素で複数のボックス シャドウが宣言されている場合です。参考までに、上記の #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);
}
要素に 1 つのボックス シャドウがある場合と、ボックス シャドウを分離する必要がある場合があります。Sass にはこのロジックを解読する機能がなく、これを達成するには別の Mixin (1 つのボックス シャドウを持つ要素用に 1 つ、2 つのボックス シャドウを持つ mixin 用に 1 つ) が必要であると誤解していますか?
問題を複雑にするために、上記の不透明度の問題はどのようにこれに影響を与えるのでしょうか? これについてフィードバックをいただければ幸いです。私が間違っているか、問題についての私の考え方に一般的な欠陥があるかどうか教えてください。ありがとう！