変数を使用してSassコードをどのようにDRYしますか？

Question

色を使ってサイトのセクションを識別するデザインがあります。私は色変数が定義されたファイルを入れました。色変数は変更される可能性があり、CSSファイルを使ってそれらを追跡することは困難です。

$people: #D50000; 
$galleries: #D500AA; 
$projects: #D5BA00; 
//etc... 

私のクラスの名前は変数の名前と一致します。たとえば、ナビゲーションメニューのようなものです：

<ul> 
    <li class="people">People</div> 
    <li class="galleries">Galleries</div> 
    <li class="projects">Projects</div> 
    <!-- etc... -> 
</ul> 

と私は自分自身が私が枯渇したい

#nav { 
    ul { 
    li.people { border-left: 5px solid $people; } 
    li.galleries { border-left: 5px solid $galleries; } 
    li.projects { border-left: 5px solid $projects; } 
    } 
} 

ようSASSを書いて見つけます。私はミックスインを使用しようとしましたが、私が渡す引数（変数間接参照）の後に名前を付けた変数を検索するようにSASSに指示する方法はわかりません。私は次のようなものを持っています：

@mixin menu-states($resource) { 
    li.#{$resource} a {      // This works 
    border-left: 7px solid $#{$resource}; // But this doesn't... 
    } 
} 

誰かがこれを乾燥させる方法について提案していますか？ありがとう。

Answer 1

あなたはそうすることはできませんが、クラスとミックスインの2つの変数を渡すことができます。

Answer 2

このコードは私のため

@mixin test($resource: "red"){ 
    $updated: unquote($resource); 
    li.#{$updated} a{ 
     border-left: 7px solid $updated; 
    } 
}