1. ホーム
  2. css

[解決済み] CSSのクラスは、1つまたは複数の他のクラスを継承することができますか?

2022-03-24 16:46:22

質問

他のCSSクラス(複数可)を継承したCSSクラスを作成することはできますか?

例えば、以下のようなものがあったとします。

.something { display:inline }
.else      { background:red }

やりたいことは、こんな感じです。

.composite 
{
   .something;
   .else
}

ここで、".composite" クラスはインラインで表示され、背景は赤になります。

解決するには?

のようなツールがあります。 LESS これは、あなたが説明したような、より高い抽象度でCSSを構成することができるものです。

Lessでは、これらを"Mixins"と呼んでいます。

の代わりに

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

と言うことができます。

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}