我可以在 SASS mixin 中声明一个新变量吗？ [复制]答案

【问题标题】：Can I declare a new variable inside a SASS mixin? [duplicate]我可以在 SASS mixin 中声明一个新变量吗？ [复制]
【发布时间】：2013-11-03 10:20:39
【问题描述】：

我有以下 SASS 混合：

@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);
}

这个 mixin 会抛出一个错误，因为 $directionOld 没有定义。我可以修复它，默认情况下将此变量添加到 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？ compass-style.org

标签： css variables sass mixins

【解决方案1】：

是的，你可以在 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);
}

【讨论】：