css - scss: 配列から変数を動的に作成する方法

Question

私はこれを持っています

        $colors:
            "dark" #3E3E3E,
            "darker" #3E3E3E,
            "light" #ECECF0,
            "green" #00A87B,
            "yellow" #FFBB3B,
            "red" #FF4633,
            "white" #FFFFFF,
            "black" #000000,
            "blue" #436FB6
        ;


        @each $color in $colors{
            // .btn-color
            .btn-#{nth($color, 1)}{
                background: nth($color, 2);
                color: #fff;
            }
            // .color / color
            .#{nth($color, 1)}, #{nth($color, 1)}{
                color: nth($color, 2) !important;
                a{
                    color: nth($color, 2);
                }
            }
            // .color-bg
            .#{nth($color, 1)}-bg {
                background: nth($color, 2);
            }
        }

さまざまなクラスを動的に作成します。これを拡張して各例の変数を作成するにはどうすればよいですか-からの値に到達する$colorsために使用する必要があります$darkdark$colors