クラス内のCSS書き込みクラス

Question

以下のようにCSSクラスのネストを書く方法はありますか？

.className{ 

    .childclassName1{ 

    } 
    .childclassName2{ 

    } 
} 

私はいくつかの製品でスタイルの変更の量が、経営陣は、これらの変更は、当分の間だけ特定のページになり、後にグローバルに適用する必要がありたいと考えていたため。だから、私はそのページのクラス名を各セレクタ（.className .childclassName1など）に追加することはできません。それは多くの時間を消費します。

Answer 1

いいえ、この構文は、CSSで定義されていないが、あなたはおそらく2つの一般CSSプリプロセッサあるSCSS（SASS）または以下（LESS）、で見てきました。これらは、よりフレンドリな構文を追加するだけでなく、変数を定義したり、条件文などのプログラミング処理を行うこともできます。

http://sass-lang.com/

http://lesscss.org/

LESSサンプルで見てみましょう：

@base: #f938ab; 

.box-shadow(@style, @c) when (iscolor(@c)) { 
    -webkit-box-shadow: @style @c; 
    box-shadow:   @style @c; 
} 

.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { 
    .box-shadow(@style, rgba(0, 0, 0, @alpha)); 
} 

.box { 
    color: saturate(@base, 5%); 
    border-color: lighten(@base, 30%); 
    div { .box-shadow(0 0 5px, 30%) } 
} 

CONS：あなたは、最終的なスタイルシートを生成するためにこれをコンパイルする必要がありますが、それはそれほど複雑ではありませんLessについて具体的に話しても、それはすぐにクライアントコンパイラを備えています。

Answer 2

はあなたが影響を与え、その後、あなたがLESSやSASSでこれを行うことができますbody.mynewclass

Answer 3

で、すべてのルールを接頭辞にしたいページのボディにクラスを追加することはできません。あなたが持っている場合 だから：

<div class="container"> 
    <p>Text</p> 
    <a href="#">Link</a> 
</div> 

をあなたは以下のように書くことができます。

container { 
    text-align:center; 
    p { 
    font-size:12px; 
    } 
    a { 
    text-decoration:none; 
    } 
} 

http://lesscss.org/