特定のクラス名に続く属性値でスタイルを変えたい。

Question

btnというクラスを用意して、その後ろに--blueがある場合はボタンの色を青、--redがある場合はボタンの色を赤にしたいと考えました。

<span class="btn--blue">1.青になる</span>
<span class="hoge btn--red">2.赤になる</span>
<span class="hoge--blue">3.青にならない</span>
<span class="btn hoge--red">4.赤にならないでほしい</span>

[class^="btn"],
[class*=" btn"]{
  color:#fff;
  &[class*="--blue"] {
        background: #00f;
    }
  &[class*="--red"] {
        background: #f00;
    } 
}

ただこの書き方だとbtnが含まれていて他のクラスに--redがある場合でも色が赤になってしまいます。
(上記HTMLの4番)
これをbtn--redの場合は赤、それ以外に--redが付いている場合は赤にしないという設定にしたいのですが
何かいい方法はありますでしょうか？
最終的に
btn--red--small
のように複数の属性でスタイルを追加していきたいと考えていて、btn--redにスタイル指定ではなく
btnで始まるクラスに--redが含まれるという形でスタイル適用が希望です。

Answer 1

仕様が複雑になるだけでメリットが少なそうなので取り下げます。すみません。

Answer 2

[class^="btn--"],
[class*=" btn--"]{
  color:#fff;
  &[class*="--blue"] {
        background: #00f;
    }
  &[class*="--red"] {
        background: #f00;
    } 
}

ということですかね。

なんでこんな複雑な仕様にする必要があるのか理解できませんが。

Comments

[gogoweb_ikeda]

これですと、btn-small hoge-red でも赤になってしまいます。
hatena19さんの言う通り複雑になるだけでメリットが少なそうなので取り下げます。すみません。

Answer 3

.btn {
  color:#fff;
  &--blue {
    background: #00f;
  }
  &--red {
    background: #f00;
  } 
}

Comments

[gogoweb_ikeda]

本文にも書いてありますが希望としてはbtn--red--smallのようにbtnに対して複数の属性をつなげるような形にしたかったのです。
複雑になるだけでメリットが少なそうなので取り下げます。すみません。

[miyabi_pudding]

そうですね、色を適用させる用のクラスを用意した方がいいかと思いますよ。