Sassでネストした親class名とタグを連結する

2021.07.30

Sassでclassの指定をする際、特定のタグの場合のみ別のスタイルを指定したいということがあったので、調べた内容をメモしておきます。

サンプルコード

やりたかったことは、最終的に以下のような形でCSSを出力することです。

.c-btn {
  color: red;
}
input[type="submit"].c-btn {
  color: blue;
}

これを.c-btn のネストした中で設定したかったので、最初は以下のように指定してみました。

.c-btn {
  color: red;
  input[type="submit"]& {
    color: blue;
  }
}

この場合、以下のようなコンパイルエラーが表示されました。

Error: Invalid CSS after "[type="submit"]": expected "{", was "&"
"&" may only be used at the beginning of a compound selector.

&の指定方法がよくないようだったので、&を#{&}のようにしてみました。

.c-btn {
  color: red;
  input[type="submit"]#{&} {
    color: blue;
  }
}

この場合はコンパイルエラーは出なかったのですが、出力内容が意図したものと微妙に違っていました。

.c-btn {
  color: red;
}
.c-btn input[type="submit"].c-btn {
  color: blue;
}

.c-btnを親classにしたくないので、先ほどの例に@at-rootを追加してみます。

.c-btn {
  color: red;
  @at-root input[type="submit"]#{&} {
    color: blue;
  }
}

@at-rootを指定すると、ネストではなくドキュメントルートとして出力されるようになります。
これで意図した形でコンパイルすることができました。

.c-btn {
  color: red;
}
input[type="submit"].c-btn {
  color: blue;
}

参考サイト

土