読者です 読者をやめる 読者になる 読者になる

ここにタイトルが入ります

デザイン&プログラミングのことも書くし、それ以外のことも書く。

【sass】インターポレーションがmixin名に使えたらいいのに…

css Rails

compass(-rails)のスプライト機能を使っていた時のこと…
photoshopのデザインカンプから画像の切り出し→compass(-rails)でのcssスプライト画像作成の流れ - 記すに足らず。


(Retina用の)画像を、以下のように3つのディレクトリに分けて

app/assets/images/sprite/test1/
app/assets/images/sprite/test2/
app/assets/images/sprite/test3/

各ディレクトリ毎にスプライト画像を作る場合…


↓のようにディレクトリごとの指定が必要になりました。(scss)

// 1つめ
$test1-r: sprite-map("test1/*.png");
$test1-r-img: sprite-url($test1-r);

@mixin sprite-background-test1($name) {
  width: image-width(sprite-file($test1-r, $name)) / 2;
  height: image-height(sprite-file($test1-r, $name)) / 2;
  $xpos: round(nth(sprite-position($test1-r, $name), 1) / 2);
  $ypos: round(nth(sprite-position($test1-r, $name), 2) / 2);
  background-image: $test1-r-img;
  background-position: $xpos $ypos;
  background-repeat:no-repeat;
  $wbgz: image-width(sprite-path($test1-r)) / 2;
  @include background-size($wbgz auto);
}

// 2つ目
$test2-r: sprite-map("test2/*.png");
$test2-r-img: sprite-url($test2-r);

@mixin sprite-background-test2($name) {
  // 省略
}

// 3つ目
$test3-r: sprite-map("test3/*.png");
$test3-r-img: sprite-url($test3-r);

@mixin sprite-background-test3($name) {
  // 省略
}

これ、以下のようにかけるんじゃないかと思っていたのですが…

// 動きません…
// mapの書き方間違ってるかも
$sprite-imgs: (
  test1: sprite-map("sprite/test1/*.png"),
  test2: sprite-map("sprite/test2/*.png"),
  test3: sprite-map("sprite/test3/*.png")
);
@each $category, $map in $sprite-imgs {
  $img: sprite-url($map);
  @mixin sprite-background-#{category}($name) {
    width: image-width(sprite-file($map, $name)) / 2;
    height: image-height(sprite-file($map, $name)) / 2;
    $xpos: round(nth(sprite-position($map, $name), 1) / 2);
    $ypos: round(nth(sprite-position($map, $name), 2) / 2);
    background-image: $img;
    background-position: $xpos $ypos;
    background-repeat:no-repeat;
    $wbgz: image-width(sprite-path($map)) / 2;
    @include background-size($wbgz auto);
  }
}


mixin名にインターポレーション使えたら、短く書けそうなのに…
どうやら使えないみたい(´・ω・`)残念

〜参考になりました!〜
variables - How to define a dynamic mixin name in SASS? - Stack Overflow



※ちなみにmap(key-value、rubyのhashみたいなの)はsass3.3から導入されていますが、
2014/08/15日時点では最新(安定版)のsass-railsはsass3.3に対応していないようでした。
お気をつけて。