JSONを使ってSassとJavaScriptで設定値を共有する方法を調べてみた

cssのプロパティをJavaScriptでも扱う必要があり、方法を検討してみた。

管理するデータを一つにして、JavaScriptからも参照できると、便利そう。
ということで、データをJSON形式でデータを持たせて、
データをSassのMap型にコンバートして扱うことができれば、実現可能そうなので、
変換するモジュールなどを調べてみた。

例えば以下のようなjsonがあった場合でそれぞれのパターンを試してみた。

---

Compass を使っているプロジェクトの場合

compass extentionとして提供されている、SassyJSONを使う。
ちなみにrubygems.orgよりもGitHubから取得したほうが最新っぽいので、注意したほうが良さそう。

sassは以下のようになる。

これをコンパイルすると、

json_encodeメソッドもあるので、contentプロパティ値にJSONの値を持たせることもで、
view側にもstyleとして出力もできそう。

---

Ruby プロジェクトの場合

sass-json-varsが良さそう。
JSONのネスト構造もmapに変換してくれて、JSONをそのままsass変数に変換してくれるので、
直感的で使いやすそう。

sassは以下のようになる。

---

そのほか

ビルドツールを使って、コンパイルする。
この場合は、gulp pluginのgulp-json-sassがある。

JSONをsass変数に変換するだけなので、sassファイルの結合とコンパイルには別のプラグインが必要。
今回は次のような感じでつかってみた。

gulpfile.jsは

gulp-json-sassでJSONをsass変数にconvertできるが、
map形式にはならないのでJSONの構造を考慮しておく必要がありそう。

デフォルトのままだと、次のようにconvertされる

ということなので、以下のsassファイルとgulp-concatで結合させて

gulp-sassでコンパイルする

他にもあるかもしれないけど、現状こんな感じでしょうか。