sass で json を使う

Question

{
    "html": {
        "background": "red"
    }
}

$html-background: (jsonから取得した値 = red)

html {
    background: $html-background;
}

json を取得して、 css で使用する方法はありますか？

Answer 1

jsonを使って動的にCSSを変化させたいのなら、JSON.parse()で取得したjsonをパースして、それに対して$(key).css(val)でループされせて適用していく形でいけそうです。

Answer 2

Sass単体であれば、マップ型で配列的なデータ構造を持って専用の関数で操作を行えます。
Sassのmap操作をおさらいする+便利な関数をいくつか

$data: (
  aaa:   bbb,
  ccc:   ddd,
);

あるいは以下のようなものを使って、Javascriptと連携すると要望に叶うかもしれません
JSONを使ってSassとJavaScriptで設定値を共有する方法を調べてみた
Sassport

Comments

[kimurayu]

SassyJsonが一番近い感じですかね。ありがとうございます。