CSSラインを1つにまとめる

Question

私が組み合わせることができるいくつかの基本スタイルを定義したいと思います。のは、私は次の行が含まれているスタイルシートを持っているとしましょう：

.whitebackground {background-color: #ffffff} 
.borderblue  {border: solid 1px #0000aa} 

新しい行に次の行を含める方法がそこにある場合、私は思ったんだけど？

div.main {background-color: #ffffff; border: solid 1px #0000aa} 

Answer 1

あなたはSASSまたはLESSライブラリを探しています：ような何か：それはこのラインでも同じよう

**div.main {.whitebackground; .borderblue}** 

は、結果は同じでなければなりません。

これにより、あるセレクタから別のセレクタへのスタイル宣言を含めることができます。 LESSを使用して

あなたは

div.main { 
    .whitebackground; 
    .borderblue; 
} 

をしたいと、あなたの構文は完全に有効な作業になります。しかし、それらがコンパイルされるとき、それは自動的に最適化された形になります。

Answer 2

標準のCSSを使用することはできません。しかし、divに複数のクラスを与えることができます。

<div class="whitebackground borderblue">

これはdiv要素にCSSの両方のセットを適用します。

ところで、私が幼児期の気分であれば、「白いバックグラウンド」や「ボーダーブルー」のような名前はあまり良いクラス名ではないと言えます。そのようなクラスでは、インラインスタイルを使うこともできます。クラス名は意味、意図、構造、強調などを伝えることになっています。 "special-remark"、 "important"、 "sidenote"、 "highlight"などの名前を使用します。divに白い背景と青色の境界線。