グローバルCSSプロパティを宣言しますか？これは可能ですか？

Question

私は非常に厄介な質問がありますが、CSSで可能かどうかはわかりません。

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

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

これも可能ですか？

.abc { 
color:red; 
} 

.abc2 { 
color:red; 
} 

.abc3 { 
color:red; 
} 

.abc4 { 
color:red; 
} 

.abc5 { 
color:red; 
} 

Answer 1

悪いニュース：あなたはCSSでそれをすることはできません。

良いニュース：LESSのようなメタCSS言語で書くことができます。これは、LESSファイルを純粋なCSSに処理します。これは「mixin」と呼ばれます。 LESSで

：

@errorColor: red; 

.error-color { 
    color: @errorColor; 
} 

#error-1 { 
    .error-color; 
} 

.all-errors { 
    .error-color; 
} 

さらに詳しい情報：http://lesscss.org/#-mixins

Answer 2

これはCSSで行うことができないが、それはまだそのようLESS、SASS、SCSS、またはスタイラスとしてCSSプリプロセッサを使用して行うには非常に人気なものです。

プリプロセッサで変数を定義できます（たとえば$ red =＃F00）。あなたのCSS文書の変数をあなたのための変数値に置き換えて、非常にDRYとモジュールCSSを書くことができます。

Answer 3

この機能は、future specの一部である "CSS変数" と呼ばれるが、まだどのブラウザに実装されていません。

ここでは、純粋なCSSでこれを行う最も良い方法は、目的の「グローバル」の追加クラスを宣言し、そのクラスをすべての関連項目に追加することです。

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

<div class="abc1 abc_global"></div> 
<div class="abc2 abc_global"></div> 

Answer 4

一度にそれらのすべてを宣言したい場合は、あなたが使用することができます。

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

それとも、追加のクラス&は、すべての.abcに.abc2を追加する宣言することができます... &色を作る：赤;。

.myRedColor { 

color:red; 

} 

を今、あなたは任意のCSSスタイルにその赤を呼び出すことができます：あなたは一度その赤い色を定義することができますLESS

で

Answer 5

。ネストされたスタイルまで！それは邪悪な道具です！

.abc1 { 

.myRedColor; 

} 
.abc2 { 

.myRedColor; 

} 
.abc3 { 

.myRedColor; 

} 
.abc4 { 

.myRedColor; 

} 

NESTED例：今すぐ

.abc { 

    .itsEasyAsOneTwoThree{ 
     .myRedColor; 

    } 

    } 

適切に "ABC" クラスの内部にネストされている私たちの "itsEasyAsOneTwoThree" のすべてのクラスは、赤スタイルが割り当てられます。それらの長い＃867530カラーコードを覚えていない:)それはどれくらいクールですか？