sassの@mixinの引数を文字列に割り当てる

使う場面は今のところ、@mixinを使いつつの引数で背景画像を変更したい時。よく忘れるのでメモ。

mixinの指定

背景画像を指定する@mixinがあって

@mixin bg {
  background-image: url("./../img/bg01.jpg");
  background-size: cover;
  background-position: center;
}

bg01.jpgを使う場所ごとに変更したい時は
インターポレーション → #{ } を使うことで背景画像を指定している文字列に引数を埋め込む事が可能。

こんな感じ。($img-num:01)の：01は初期値。

@mixin bg($img-num:01) {
  background-image: url("./../../img/bg#{$img-num}.jpg");
  background-size: cover;
  background-position: center;
}

呼び出す

#sample {
  @include bg(02);
}

これでbg02.jpgが背景画像に指定される。
もし引数に何も指定してない時は初期値の01になる。
初期値を指定してない時はちゃんと引数入れてねっていうエラーが出る。

参考：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_