Могу ли я объявить новую переменную в миксине SASS?

У меня есть следующий миксин 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);
}

Этот миксин выдает ошибку, потому что $ directionOld не определено. Я могу исправить это, добавив эту переменную по умолчанию в параметры миксина:

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

Но это не так чисто, как хотелось бы, есть ли ошибка в первом коде?

Большое спасибо!


variables css sass mixins
person scerrutti    schedule 24.10.2013    source источник
comment
Какова ваша цель с этим блоком кода?   -  person 2507rkt3    schedule 24.10.2013
comment
Вы смотрели на существующие библиотеки вместо того, чтобы создавать собственные миксины? compass-style.org   -  person cimmanon    schedule 24.10.2013

Ответы (1)


arrow_upward
8
arrow_downward

Да, вы можете определить новую переменную в 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);
}
person Parhum    schedule 01.12.2013