CSSのスタイルを親に合わせてグループ化する方法はありますか？

Question

ので、私は再例えば、何度も何度も親の名前を記述する必要はありません親に応じてグループにCSSを記述するためにそこの方法です：

.firstparent { 
    .firstchild { background: red } 
    .secondchild { background: orange } 
    .thirdchild .grandchild { background: green } 
    /* This will only affect the elements with the class name that is the child of firstparent *?? 
} 

.secondparent { 
    div { background: blue } 
    .firstchild { background: black } 
} 

/* Right now I am writing as below */ 

.firstparent .firstchild { background: red } 
.firstparent .secondchild { background: orange } 
.firstparent .thirdchild .grandchild { background: green } 

.secondparent div { background: blue } 
.secondparent .firstchild { background: black } 

よりもむしろ再親の名前を書いておきます私は上記のようにCSSを書く方法が何度も何度もありますか？

Answer 1

SASS/LESSのようなCSSプリプロセッサは、親要素の中に子を入れ子にするのに役立ちます。また、親要素に対してアクティブな要素の状態や疑似要素などをネストすることもできます。詳細情報については

、およびsass reference guideを参照し、詳細な情報についてはsass basics guide

をチェックキックスタートを取得します。

Answer 2

バニラCSSはセレクタのネストをサポートしておらず、希望する方法をブロックします。他の答えはすでに示唆されているように、現在の最先端技術は、LESS、SASS、またはStylusのようなCSSプリプロセッサの使用を必要としています。採用者の質問は、どのプリプロセッサを選択するかです。

私は、LESSの人気が低下していると主張します。今ではSASSが最も普及しています。たとえば、ブートストラップがLESSからSASSに移行しました。しかし、SASSは、既存のバニラHTML/CSS/Javascriptプロジェクトでセットアップするのは簡単ではありません。たとえば、CSSファイルを生成できるビルドシステムが必要です。グラン/ウェブパック/ etc。ライブリロードと他のすべてのファンシーな新しいおもちゃ。

CSSのスーパーセットであるLESSは学習曲線が小さく、CSSのドロップイン置換として使用できます。あなたは自分のプロジェクトでLESSスタイルシートをリンクし、ブラウザ内LESSコンパイラを使用します。

<link rel="stylesheet/less" type="text/css" href="styles.less" /> 
<script src="less.js" type="text/javascript"></script> 

すべての既存のCSSファイルも有効LESSファイルですので、LESSをCSSからの移動の費用はかかりません。

SASSとStylusは、LESSよりも強力ですが、ビルドシステムが必要です。しかし、専用ビルドシステムを設置することは、深刻なプロジェクトには推奨されます。ビルドシステムがあれば、SASSに直接移動することができます。 SASSのSCSS変種もCSSとドロップイン互換ですが、LESSでは互換性がありません。