【メモ】Sass/Scss、Compassの挙動メモ

ちょっと苦痛になってきたので気分転換にメモ書き。

functionでプレースホルダ作りたい

問題のコード

$gList: ();
@function hoge($list...) {
  @each $v in $list {
    %foo {
      content: $v;
    }
    $gList: append($v);
  }  
}

見事に怒られる。
@functionだとどうやらプレースホルダが作れない模様。
@mixin使えよってことですね。

結論

@mixinと@function両方で頑張る。（@mixin主体で）
あくまで@functionは処理して値返すだけ

JSON読み込んでmapにしたい

やってみた

require "sass"

module JSON2Map
  def json2map(filePath)
    
    # JSON文字列を取得
    jsonStr = ""
    fs = open(filePath.value)
    jsonStr = fs.read
    fs.close
    
    # JSON文字列をrubyオブジェクトに変換
    obj = JSON.parse(jsonStr)

    # Sass::Script::Value::Mapオブジェクトを作って返す
    map = {}
    obj.each {|k, v|
      # 実際はStringだけじゃなく色んな型が存在したり、
      # ネストに対応するために再帰したりする
      map[Sass::Script::Value::String.new(k)] = Sass::Script::Value::String.new(v)
    }
    Sass::Script::Value::Map(map)
  end
end

module Sass::Script::Function
  include JSON2Map
end

config.rbにPluginとして読み込むと

$hogeMap: json2map('hoge.json');

こんな感じに扱えるようになります。やったー！

結論

先人が sass-json-var を作っています。
https://github.com/vigetlabs/sass-json-vars

• 本当に個人的に import する形を嫌っただけ
• カスタム関数（プラグイン）に挑戦したかった（なおruby経験0ヶ月）
• 大いに丸パクリ参考したので、特に思い入れがないのなら、本当にsass-json-var を使った方が楽です
• 自前でしっかり書いたやつは各型に適切に変換してます。

なお、sass-json-varは全部文字列でくるので適宜変換が必要だった気がします。
例：

@import "hoge.json";  // (foo: "12px")

$foo: map-get($hoge, foo); 
p {
  font-size: $foo - 2;  // error!
}

なお、必要そうな型に関しては、以下のとおり。

Sass::Script::Value::String.new("")  # 文字列
Sass::Script::Value::Number.new(0)   # 数値
Sass::Script::Value::Bool.new(true)  # 真偽値
Sass::Script::Value::List.new([])    # 配列
Sass::Script::Value::Map.new({})     # 連想配列

listは値をSassオブジェクトにしないとエラーが出ました。
mapはキーも値もSassオブジェクトにしないとエラーが出ました。

終わりに

↑のを探り探りやりながら、利用する人がどうしたら使いやすいかを
考えながら作っているので、あれやこれや悩んで先に進まないという苦痛です。

とりあえずRuby気持ち悪い…！（普段JS書きなんでまったく慣れてないだけです）