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


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

2021年10月
 12
3456789
10111213141516
17181920212223
24252627282930
31