0

私は非常に奇妙な質問をしています.cssで可能かどうかはわかりません

以下に示すように、3 つの異なる css クラスがあるとします。これらすべてのクラスに共通のプロパティがあることがわかります。この色を別の場所で宣言し、ここで参照を渡したいので、次回変更したい場合は色は、5 つのクラスすべてで変更するのではなく、1 か所で簡単に変更できます。

これには body{} またはラッパーを使用できますが、それはサイト全体の色に影響しますよね? これを行う方法はありますか？

これは可能ですか？

.abc {
color:red;
}

.abc2 {
color:red;
}

.abc3 {
color:red;
}

.abc4 {
color:red;
}

.abc5 {
color:red;
}
4

6 に答える 6

3

悪いニュース: CSS ではできません。

幸いなことに、LESS のようなメタ CSS 言語で記述できます。これにより、LESS ファイルが純粋な CSS に処理されます。これを「ミックスイン」と呼びます。

以下で：

@errorColor: red;

.error-color {
  color: @errorColor;
}

#error-1 {
  .error-color;
}

.all-errors {
  .error-color;
}

詳細: http://lesscss.org/#-mixins

于 2012-05-04T05:48:17.933 に答える
1

一度にすべてを宣言したい場合は、次を使用できます。

.abc, .abc2, .abc3, .abc4, .abc5 {
  color:red;
}

または、追加のクラスを宣言して、すべての .abc、.abc2.... に追加し、color:red; にすることもできます。

于 2012-05-04T05:50:49.880 に答える
0

この機能は「CSS 変数」と呼ばれ、将来の仕様の一部ですが、まだどのブラウザーにも実装されていません。

今のところ、純粋な CSS でこれを行う最善の方法は、目的の「グローバル」に対して追加のクラスを宣言し、そのクラスを関連するすべてのアイテムに追加することです。

.abc_global { color: red; }
.abc1 { /* additional styling */ }
.abc2 { /* additional styling */ }

<div class="abc1 abc_global"></div>
<div class="abc2 abc_global"></div>
于 2012-05-04T05:48:45.773 に答える
0

LESSで

その赤い色を一度定義することができます：

.myRedColor {

color:red;

}

これで、任意の CSS スタイルでその赤を呼び出すことができます。ネストされたスタイルも！邪悪な道具だ！

.abc1 {

 .myRedColor;

}
.abc2 {

 .myRedColor;

}
.abc3 {

 .myRedColor;

}
.abc4 {

 .myRedColor;

}

ネストされた例:

  .abc {

    .itsEasyAsOneTwoThree{
       .myRedColor;

    }

   }

これで、「abc」クラス内に適切にネストされたすべての「itsEasyAsOneTwoThree」クラスに赤いスタイルが割り当てられます。長い #867530 カラー コードを覚える必要はもうありません :)

于 2012-05-04T06:03:06.680 に答える
0

これは CSS では実行できませんが、LESS、SASS、SCSS、または Stylus などの CSS プリプロセッサを使用して実行することは依然として非常に一般的です。

プリプロセッサを使用すると、変数を定義できます ($red = #F00 など)。CSS ドキュメント内の変数を変数値に置き換えてくれるので、非常に DRY でモジュール化された CSS を書くことができます。

于 2012-05-04T05:46:06.233 に答える