BEMとSassにおける書き方について

Question

BEMとSassについての質問なのですが、
Modifierの種類が増えるたびに.btn__textというクラスを毎回書かなければならず煩わしいため、
&_textの部分で変数を使ってもスコープ外なのでうまくいきませんでした。
何か良い解決方法はありますか？

Comments

[Lhankor_Mhy]

上手くいかなかったコードをご提示ください。

Answer 1

いま思いついたのは下記2点です。

[1] <span class="btn__text">の存在が、煩わしさの原因と考えます。本当に必要ですか?

HTML側で<span class="btn__text">を消せば、CSS側で.btn__textが不要となり、
background-colorを指定している箇所にcolorが指定できるので煩わしさはなくなると思います。

[2] color: inherit;を使うと、毎回「.btn__text」と書かなくてよくなるかもしれません。

.btn {
  width: 200px;
  &__text {
    font-size: 18px;
    color: inherit; /* 追加。祖先要素の指定を継承する */
  }
  
  &_theme_caution {
    background-color: red;
    color: #fff; /* こちらの指定が、.btn__textに継承される */
    
    /* 以下の記述が不要になる */
    /*
    .btn__text {
      color: #fff;
    }
    */
  }
  
  /* 省略 */
}