SASSの連想配列(MAP)に入れたクォーテーションを正しく表示する方法

SASSの連想配列(MAP)に入れたクォーテーションを正しく表示する方法WEB

SASSでfont-familyの値を連想配列に格納しようとしたのですが、シングルクォーテーションがうまく表示できていないことに気づきました。

色々試して解決方法がわかったのでメモしておきます。

シングルクォーテーションを表示したい場合

記述内容

$array_single_quotation:(
    A:"'xxx','yyy','zzz'",
    B:#{'xxx','yyy','zzz'},
    C:#{"'xxx','yyy','zzz'"},
);

.single_quotation_test{
    font-family:map-get($array_single_quotation, A);
    font-family:map-get($array_single_quotation, B);
    font-family:map-get($array_single_quotation, C);
}

出力結果

.single_quotation_test {
  font-family: "'xxx','yyy','zzz'";
  font-family: xxx, yyy, zzz;
  font-family: 'xxx','yyy','zzz';
}

Cのパターンのみ正しく表示できました。

ダブルクォーテーションを表示したい場合

記述内容

$array_double_quotation:(
    A:'"xxx","yyy","zzz"',
    B:#{"xxx","yyy","zzz"},
    C:#{'"xxx","yyy","zzz"'},
);

.double_quotation_test{
    font-family:map-get($array_double_quotation, A);
    font-family:map-get($array_double_quotation, B);
    font-family:map-get($array_double_quotation, C);
}

出力結果

.double_quotation_test {
  font-family: '"xxx","yyy","zzz"';
  font-family: xxx, yyy, zzz;
  font-family: "xxx","yyy","zzz";
}

こちらも同様にCのみ正しく表示できました。

まとめ

インターポレーション『#{}』と 『 “』や 『 ‘ 』 の合わせ技で解決できました。

お困りの方は是非お試しください。

THIS POST
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
MEMO WEB
COLOR CODE