CSSに別のCSSの情報を付与する方法はないか

Question

HTML5 + CSSでやっています。(趣味)

CSSは外部ファイル( 例えば default.css等 ) としてやっています。

質問: CSSに別のCSSの情報を付与する方法はないか?

例えば、基本的なCSSを default.cssに記述しておいて、
基本的なHTML構造を用意するとします。

これを(ファイルとディレクトリを)コピーして"project1"というディレクトリを作ります。

この中に入っているdefault.cssには初期状態として

.redpen{
   color: red;
}

.greenpen{
   color: green;
}

.marker{
   background-color: yellow;
}

みたいに書いているとします。

で、このdefault.cssを @importでしたっけ?
これで取り込んでoriginal.css とします。( このproject独自の定義 )

original.css内で redmarker = redpen + marker のように合成することはできないでしょうか?

書き方はあくまでイメージですが、

.redmarker{
  + .redpen;
  + .marker;
}

のような感じです。

ある意味、C++とかでいう、多重継承みたいな状態をイメージしています。

これって不可能でしょうか?

やはり

<span class="marker"><span class="redpen">全米が泣いた!</span></span>

のような感じでHTMLの方で追加していくしかないでしょうか?

Answer 1

半角スペースで複数つければよいです。

<span class="marker redpen">全米が泣いた!</span>

あとcss自体も色々な書き方が出来ます。

• [CSS] 複数クラス「and（かつ）」の書き方

SCSSを導入すればまさに継承のような定義の仕方が可能です。

• Sass(SCSS)のmixin, extendなどまとめ

※ただ、コンパイル結果はCSSなのでHTMLに当てる場合は最初に書いたような書き方になります。

Comments

[BeatStar]

ご回答ありがとうございます。

おお、近いです!
まだ試していないのでどうなるかわかりませんが、
ちょっと惜しいぐらいです。

個人的にはsass? のextendに近い処理がしたかったのです...
(今、sassっていうのを知りました...)

でも、
<span class="marker"><span class="redpen">全米が泣いた!</span></span>
よりはかなり、私がやりたかったことに近いので、sassっていうのを理解するまではこちら( and のやつ )を使わせていただきます!

[BeatStar]

そのまま、囲めばよかったのか...

[m.ts10806]

cssはあくまでレイアウトのみを司るものなのでプログラミング的に都合の良いようには作られてなかったりします。これでもだいぶ柔軟になってきましたし、SCSSという仕組みはできたものの結局コンパイルしてcssとして読ませるしかなかったりします。
そこは仕様として受け止めるしかない部分もありますね

Answer 2

回答として少し違っていたらすみません。

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で四則演算ができるようになっていたりするので
この辺りももっと良い方法があるかもしれません。
参考になりましたら幸いです。

Comments

[BeatStar]

ご回答ありがとうございます。

おー、sassっていうのがあるんですねぇ。

[BeatStar]

sassっていうのを試してみてから使わせてもらいますね

[ruuusaamarki]

すみません、extendの方が近そうですね。
私も使ったことなかったので勉強になりました！
またsassとscssの記載も間違いがあったので修正しました。
今回書いたのはscssでした。失礼いたしました。