我可以在SASS mixin中聲明一個新的變量嗎？

Question

我有以下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這混入拋出一個錯誤。 我可以修復它在默認情況下將這個變量的混入PARAMS：

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

但是，這並不乾淨，因爲我想，有沒有在第一代碼的任何錯誤？

非常感謝！

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