【Sass】SCSSでネストの深い位置から途中のセレクターを置き換える方法

SCSSでネストの深い位置から途中のセレクターを置き換える方法

Sassに用意されているselector-replace関数を使用します。

selector-replace($selector, $original, $replacement)

使い方

第一引数に置換範囲のセレクター、第二引数に置換範囲内の置換したいセレクター、第三引数に置換後のセレクターを指定。

selector-replace("置換範囲", "置換範囲内の置換したいセレクター", "置換後のセレクター")

第一引数の置換範囲ってどうやって指定するの？ってなるかもしれませんが&を指定しておけば大丈夫です！
※&は親までのセレクターを取ってきます。

ネストを解除する@at-root、セレクター内で関数や変数などを使用可能にするインターポレーション#{}と組み合わせます。

使用例

.cardに.is-smallが付与されたとき.titleのスタイルを変更したい

コンパイル前

.card {
  .title {
    font-size: 16px;
    @at-root #{selector-replace(&, ".card", ".card.is-small")} {
      font-size: 12px;
    }
  }
}

コンパイル後

.card .title {
  font-size: 16px;
}

.card.is-small .title {
  font-size: 12px;
}

これで.cardに.is-small付与されているスタイルができましたね！
このようにネストの深い位置からセレクターを自在に変更できるので様々な場面で活用できるかと思います。

さらに使いやすくmixin化しよう！

上記の方法だと記述が長くなってしまい可読性が悪くなってしまうのでmixin化してシンプルにしようと思います。

@mixin replace ($original, $replacement) {
    @at-root #{selector-replace(&, $original, $replacement)} {
        @content
    }
}

mixin化したファイルは_replace.scssなどにしてimportするといいと思います。

mixinの使い方

@include("置換したいセレクター", "置換後のセレクター") {
  //スタイルを記述
}

使用例

コンパイル前

.card {
  .title {
    font-size: 16px;
    @include replace(".card", ".card.is-small") {
      font-size: 12px;
    }
  }
}

コンパイル後

.card .title {
  font-size: 16px;
}

.card.is-small .title {
  font-size: 12px;
}

結果はmixin化前と同じですね！
記述が短くなり引数も2つ指定するだけでよくなりシンプルになりました！

似たようなことが出来るmixinもあります

ネストされたセレクターの中から特定のセレクターの状態を変更するmixin

【Sass】特定の親セレクタの状態を変更するmixin ネスト外にも対応

ネストされたセレクターの深い位置から上から上のセレクターの状態を楽に変更できるmixinを紹介します！BEMで書いている場合はネストをあまりせずに独立してスタイルを書くことが多いと思いますがそれにも対応しています。

まとめ

個人的にこの手法はよく使われているものだと思っています。
今回紹介した例以外にも、hover時の効果などにも使えますので、まだ使っていない方はぜひ使ってみて下さい！すごく便利ですので！