質問: redpen + marker のように合成することはできないでしょうか? 書き方は**あくまでイメージ**ですが、 ``` .redmarker{ + .redpen; + .marker; } ``` のような感じです。 ある意味、C++とかでいう、多重継承みたいな状態をイメージしています。 これって不可能でしょうか? やはり ``` 全米が泣いた! ``` のような感じでHTMLの方で追加していくしかないでしょうか?
回答: 回答として少し違っていたらすみません。 scssのmixinがやりたいことと近いのかなという印象だったので回答してみます。 https://qiita.com/one-a/items/2758511326c09200fded ``` @mixin redpen(){ color: red; } @mixin greenpen(){ color: green; } @mixin marker(){ background-color: yellow; } .redmarker { @include redpen(); @include marker(); } ``` scssはブラウザでサポートされていなかったと思うので 一般的にはローカル環境などでコンパイルすることが多いと思います。 私はgulpというものを使用してCSSに書き出していますが 上記をコンパイルすると以下のようになります。 ``` .redmarker { color: red; background-color: yellow; } ``` scssはプロパティを変数に入れたり その変数を引数にしてオブジェクト指向っぽく書けたりします。 数年前にCSS界隈で流行っていたもので 現在は生のCSSで四則演算ができるようになっていたりするので この辺りももっと良い方法があるかもしれません。 参考になりましたら幸いです。