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

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;
}

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年5月
1234567
891011121314
15161718192021
22232425262728
293031