[解決済み] Sassで変数を動的に作成または参照する

質問

自分の変数で文字列補間を行い、別の変数を参照したいのですが、どうすればよいでしょうか。

// Set up variable and mixin
$foo-baz: 20px;

@mixin do-this($bar) {
    width: $foo-#{$bar};
}

// Use mixin by passing 'baz' string as a param for use $foo-baz variable in the mixin
@include do-this('baz');

しかし、これを実行すると、次のようなエラーが発生します。

未定義の変数: "$foo-"です。

SassはPHPスタイルの変数に対応していますか？

どのように解決するのですか？

Sassでは、変数を動的に作成したりアクセスしたりすることはできません。 しかし、同様の動作のためにリストを使用することができます。

scssを使用します。

$list: 20px 30px 40px;    
@mixin get-from-list($index) {
  width: nth($list, $index);
}

$item-number: 2;
#smth {
  @include get-from-list($item-number);
}

cssが生成されました。

#smth {
  width: 30px; 
}

• http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#lists
• http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#list-functions