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とか)で同じようになるかは不明。

この記事を書いた人

アバター

アルム=バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。