Я хотел бы создать Sass mixin для свойства box-shadow, но я столкнулся с некоторыми проблемами. Некоторые из существующих кодов выглядят следующим образом.
#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 не может оценить переменную $вставки.
В предыдущем примере показана только проблема, с которой я сталкиваюсь, когда она вставляется в рамку-тень, или нет. Другая проблема, с которой я сталкиваюсь, - это когда в одном элементе объявляется несколько теней. Обратитесь к #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);
}
Иногда элемент имеет одну коробчатую тень, а в других случаях он должен отделять тени. Я ошибаюсь, что Сасс не обладает способностью расшифровать эту логику, и для достижения этого потребуются отдельные Mixins (один для элементов с одной теневой коробкой, другой для mixins с двумя тенями коробок).
И чтобы усложнить этот вопрос, как описывается выше проблема непрозрачности? Хотелось бы получить некоторые отзывы об этом. Дайте мне знать, если я ошибаюсь, или то, как я думаю о проблеме, является недостатком в целом. Спасибо!
