SCSS記法でタグ名とクラス名をつなげて記述する方法

Question

SCSS記法で以下のようなCSSを実現したい場合はどのように記述すればいいですか？

.btn {
  color: red;
}

div.btn {
  color: blue;
}

できれば btn という記述が１回で済むような方法が知りたいです。
よろしくお願いいたします。

Answer 1

これでどうじゃ？

.btn {
  color: red;

  @at-root div#{&} {
    color: blue;
  }
}

Comments

[bwz61366]

うわっ、かぶっちまった。

[gesorein]

回答ありがとうございます！SCSS記法ではこの方法しかないのかもしれませんね...。
せっかく答えていただいたので、ベストアンサーにさせていただきました！

[bwz61366]

たしか、issueでもコレと同じ話題上がってたんだけど、なんかようわからん状態で終わっていた記憶がある
残念ながら、当分はこれ使っていくしかないなー
むぐむぐ

[gesorein]

返信ありがとうございます！探してみたら issue 見つかりました。
どうやら selector& はサポートする予定らしいです。
https://github.com/sass/sass/issues/1425

Answer 2

少し強引な方法かもしれませんが、以下の書き方で実現することができました。

.btn {
  color: red;

  @at-root div#{&} {
    color: blue;
  }
}

Answer 3

.btn {
  color: red;
}

上記だけ記載すればdiv.btnの場合も含まれます。

.btnは赤で、div.btnは青にしたいというような時は以下のような書き方でできます。
[追記] すみません、lessの記法とごっちゃになってて誤答しました。
一応lessでは以下の書き方ができます。

.btn {
  color: red;

  div& {
    color: blue;
  }
}

Comments

[gesorein]

回答ありがとうございます！すみません、回答の途中で少し質問を修正してしまいました。
SCSSで div& のように記述すると以下のようなエラーが表示されてしまいます。

Invalid CSS after "div": expected "{", was "&"
"&" may only be used at the beginning of a compound selector.

ちなみにSassのバージョンは3.5.6です。
なるほど、LESSだとたしかに問題ないみたいですね...！

[dice142]

scssでは「div&」のように&を後ろに続ける書き方はできないようです。。。
<div class="btn hoge"></div>
<input type="button" class="btn">
のように別のクラス名をつけると以下のような書き方ができますが、そういうことではないですよね？

.btn {
color: red;
/* divにhogeクラスを付けた時はこう書ける */
&.hoge {
color: green;
}
}

[gesorein]

そうですね、別のクラス名は付けないようにしたいですね...！