SASS/SCSS：文字列/名前から変数を補間する

Question

変数を名前で取得することは可能ですか？

私は次の関数を構築しようとしたが、期待どおりに動作していないです...

@function variable-lookup($variable, $suffix: "") { 
    $value: null; 
    @if ($suffix != "" and global-variable-exists($variable+"-"+$suffix)) { 
    $value: #{$variable+"-"+$suffix}; 
    } 
    @else if (global-variable-exists($variable)) { 
    $value: #{$variable}; 
    } 
    @return $value; 
} 

は、ここでそれが使用されるかもしれない方法の例です：

$primary: #000; 
$primary-hover: blue; 

a { 
    color: variable-lookup("primary", "base"); 

    &:hover { 
    color: variable-lookup("primary", "hover"); 
    } 
} 

本当の力がでてくるでしょうこの「可変参照」関数の回りに、コンテキスト特有の短縮形のラッパー関数を書いてみたいと思っています。

これを実現する方法はありますか？

Answer 1

を補間して、値primary-baseとし、さらに同じ変数名の値を取得しようとすると、は無効ですです。 primary-baseはすでに値であり、変数名として解釈できません。そのようなことは、多くの混乱を招く可能性があります。あなたが達成したい何のため

、あなたはそのマップでmapを使用してkeyをチェックするのに優れている

$colours: (
    'primary': red, 
    'primary-base': blue 
); 

@function variable_lookup($colour, $suffix: '') { 
    $value: null; 
    @if ($suffix != '' and map-has-key($colours, unquote($colour+'-'+$suffix))) { 
    $value: map-get($colours, unquote($colour+'-'+$suffix)); 
    } @else if (map-has-key($colours, unquote($colour))) { 
    $value: map-get($colours, unquote($colour)); 
    } 
    @return $value; 
} 

div { 
    color: variable-lookup(primary, base); 
} 

p { 
    color: variable-lookup(primary); 
} 

これは、次のCSS

div { 
    color: blue; } 

p { 
    color: red; } 

あなたのコード保存された色にコンパイル変数として使用しましたが、これらの名前はkeysでmaps

このすべてmap-has-keyメソッドを使用してコード内の変数のチェックをシミュレートする必要があります。それがtrueを返した場合、keyが存在し、私たちはこのような場合には、あなたのコメントで提起された問題に対処するための

UPDATED ANSWER
一つの方法を定義することですmap-getを使用して色になり値を得ることができます変数ともう一つの方法は、

$colours:(); 

$list: primary success warning; //map primary to blue, success to green and so on 
$shades: blue green yellow; 

@for $i from 1 through length($list) { 
    $key: nth($list, $i); 
    $value: nth($shades, $i); 
    $colours: map-merge($colours, ($key: $value)); 
    $colours: map-merge($colours, (unquote($key+'-hover'): darken($value, 5%))); 
} 

@debug $colours // (primary: blue, primary-hover: #0000e6, success: green, success-hover: #006700, warning: yellow, warning-hover: #e6e600) 

スタイルに二つのリストとマップの色を反復処理することですマップの値として

$primary: #fff; 
$warning: yellow; 

$colours: (primary: $primary, 
      primary-hover: darken($primary, 5%), 
      secondary: $warning, 
      secondary-hover: darken($warning, 5%)); 

をそれらを使用します

variable_lookupの機能は同じです。

希望することができます。