我有以下SASS mixin：
@mixin gradient($start, $end, $fallback: $end, $direction: bottom) {
@if $direction == top {
$directionOld: bottom;
} @else if $direction == right {
$directionOld: left;
} @elseif $direction == bottom {
$directionOld: top;
} @elseif $direction == left {
$directionOld: right;
}
background: $fallback;
background: -webkit-linear-gradient($directionOld, $start, $end);
background: linear-gradient(to $direction, $start, $end);
}
由于未定义$ directionOld，因此此mixin引发错误。我可以修复默认情况下将此变量添加到mixin参数中的问题：
@mixin gradient($start, $end, $fallback: $end, $direction: bottom, $directionOld: top) {
@if $direction == top {
$directionOld: bottom;
} @else if $direction == right {
$directionOld: left;
} @elseif $direction == bottom {
$directionOld: top;
} @elseif $direction == left {
$directionOld: right;
}
background: $fallback;
background: -webkit-linear-gradient($directionOld, $start, $end);
background: linear-gradient(to $direction, $start, $end);
}
但这不是我想要的那么干净，第一个代码中是否有任何错误？
非常感谢！
是的，您可以在Mixin中定义新变量，但是必须在if语句中使用它之前定义它。
我再次编写您的代码：
@mixin gradient($start, $end, $fallback: $end, $direction: bottom) {
$directionOld:top !default;
@if $direction == top {
$directionOld: bottom;
} @else if $direction == right {
$directionOld: left;
} @elseif $direction == bottom {
$directionOld: top;
} @elseif $direction == left {
$directionOld: right;
}
background: $fallback;
background: -webkit-linear-gradient($directionOld, $start, $end);
background: linear-gradient(to $direction, $start, $end);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句