sass - @each ディレクティブの sass スクリプト変数

Question

scss ファイルに次のコード スニペットがあります。

$ttk-bg-green: #99FF00;
$ttk-bg-orange: #FFBE00;
$ttk-bg-purple: #CD66FF;
$ttk-bg-blue: #55BBFF;

$ttk-icon-green: #80D500;
$ttk-icon-orange: #FFAF37;
$ttk-icon-purple: #CD66FF;
$ttk-icon-blue: #62C0FF;

$color-types: "bg" "icon";
$color-styles: "green" "orange" "purple" "blue";
@each $color-type in $color-types {
  @each $color-style in $color-styles {
    .ttk-#{$color-type}-#{$color-style} { color: $ttk-#{$color-type}-#{$color-style}; }
  }
}

次の行に沿って何かを生成することになっています:
.ttk-bg-green: #99FF00;

コンパス コンパイラは、$ttk 変数が存在しないと言って、コードのコンパイルに失敗します。
それを変数全体として認識できないだけです。
アイデア？解決策？