Scssのmixinの引数をセレクタとして使用する

なんのこっちゃという感じですが、制約の強いページの作り方をしていまして、その中で出てきた課題です。

• あるmixinを使い回す
  • 今回は背景画像を指定するmixin
• 引数として渡ってきた文字列をセレクタ指定として使用したい。また、他の引数も使用する
  • 条件は例えば下記の通り
    • クラス”hoge”では画像A.jpgを高さ200pxで適用
    • クラス”piyo”では画像B.jpgを高さ400pxで適用

というような条件をクリアしたくなりました。で、どうしたかというと下記。

@mixin backgroundImage($imgPath, $height, $class-name) {
    .#{$class-name} {
        height: $height;
        background: {
            image: url($imgPath);
            repeat: no-repeat;
            position: center center;
        }
    }
}

このmixinを呼び出すのは下記のようなやり方で。

@include backgroundImage("../img/A.jpg", 200px, "hoge");
@include backgroundImage("../img/B.jpg", 400px, "piyo");

こんな感じでできました。なお、肝は最初のコードの中の

.#{$class-name} { /* ここに指定 */ }

calcの中で自動計算されないように#{変数}と囲むというTipsは持っていたので、これを使えばできないかとカンで書いてみたところビンゴ。最初の.は通常と同様にクラスの指定。その後に#{変数}を繋げることでできた、という感じです。ちなみに素直に.$class-nameと書いたら予想通り怒られました。ちなみにコンパイル環境はvue cli 3系のコンパイル環境で試しましたので、他の環境(例えばrubyのsassとか)で同じようになるかは不明。