【Sass】配列ループと文字連結

Question

Sass初心者です。
この辺りを見て勉強しております。
https://qiita.com/tomoyuki_okawa/items/b7c0d970f45435eab7c3

$directions : 1px 1px 0, -1px -1px 0,
             -1px 1px 0, 1px -1px 0,
             0px 1px 0, 0 -1px 0,
             -1px 0 0, 1px 0 0;
$grey : #444;

これを@eachを用いて、コンパイル後に

.text-stroke-grey {
  text-shadow: 1px 1px 0 #444, -1px -1px 0 #444,
               -1px 1px 0 #444, 1px -1px 0 #444,
               0px 1px 0 #444, 0 -1px 0 #444,
               -1px 0 0 #444, 1px 0 0 #444;
}

となるようにするにはどのようにすればよいのでしょう？
greyは一例で、これを複数の色で作りたいと思っています。
eachを使うなどに準じていなくても問題ありませんので、解決方法をお教えいただけると幸いです。
よろしくお願い致します。

Answer 1

複数の色でクラスを作りたいというのであれば、色の連想配列を用意し、@each で回すことになると思います。

$colors: (
  gray: #444,
  light-gray: #999,
);

@each $key, $color in $colors {
  .text-stroke-#{$key} {
    text-shadow: 1px 1px 0 $color, -1px -1px 0 $color,
                 -1px 1px 0 $color, 1px -1px 0 $color,
                 0px 1px 0 $color, 0 -1px 0 $color,
                 -1px 0 0 $color, 1px 0 0 $color;
  }
}

Comments

[moni]

回答ありがとうございます！
やはり$colorを8回書くことは避けられないですね…
これで書きたいと思います、ありがとうございました！