Sass - 変数でLighten/Darken関数を逆転させる方法？

Question

私は、変数を使用して、暗い/明るい色の機能を反転させる簡単な方法を考えようとしています。そう...

$invert_switch: off; 

そして...

@if $invert_switch == "on" { 
    darken == lighten 
    lighten == darken 
} @else { 
    darken == darken 
    lighten == lighten 
} 

ような何か、私はそれが適切なコードではありません知っている、私は非常に簡単にそれを説明しようとしています。

これを使用した場合は...

background: darken($bg, 10%); 
color: lighten($txt, 50%); 

それは次のようになりますので、どのように私は、それを反転でき...

background: lighten($bg, 10%); 
color: darken($txt, 50%); 

それとももっと簡単な方法がありますか？

Answer 1

darkenとlightenの機能の名前を変更しようとしましたが、できません。私が見つけた問題は、SASSは@breakまたは@continueのようなものではなく、何もしません。私の考えは次のコードですが、カスタム機能がSASS機能と一致すると、無限ループになります。

$invert_switch: on; 

@function darken($color, $amount){ 
    @if $invert_switch == on { 
    @return lighten($color, $amount); 
    } 
    @else { 
    @return darken($color, $amount); 
    } 
} 

@function lighten($color, $amount){ 
    @if $invert_switch == on { 
    @return darken($color, $amount); 
    } 
    @else { 
    @return lighten($color, $amount); 
    } 
} 


h1{ 
    color: darken(red, 10%); 
} 

p{ 
    color: lighten(red, 10%); 
} 

は私が仕事にアンダースコアを追加する機能の名前を変更します。

$invert_switch: on; 

@function _darken($color, $amount){ 
    @if $invert_switch == on { 
    @return lighten($color, $amount); 
    } 
    @else { 
    @return darken($color, $amount); 
    } 
} 

@function _lighten($color, $amount){ 
    @if $invert_switch == on { 
    @return darken($color, $amount); 
    } 
    @else { 
    @return lighten($color, $amount); 
    } 
} 


h1{ 
    color: _darken(red, 10%); 
} 

p{ 
    color: _lighten(red, 10%); 
} 

たぶん誰かが機能

の適切な名前を使用してこのコードを向上させることができます