css - CSS最適化、共通部分抽出？

Question

次の CSS スタイルの場合:

#div a {color:red}
#div li {width:100px}
#div span {font-size:10px}

上記のルールを書く方法はありますか

#div{
a {color:red}
li {width:100px}
span {font-size:10px}
}

#div を 1 回記述するだけで、Web ページのさまざまな領域を簡単に削除またはモジュール化できます

Answer 1

"less" ( http://lesscss.org/ )について聞いたことがありますか?

あなたのスタイルコードはまさにあなたが上で書いたものではありません。

Answer 2

これを行う方法はありますが、純粋な css ではできません。別の方法として、次のものを使用できます。

• 以下
• サス

Web 上にはこれらのスーパーセットが他にもありますが、LESS と Sass がおそらく最も一般的です。

構文は、要求どおりにネストされており、ネイティブ css と互換性があります。

Answer 3

いいえ、純粋な CSS ではできません。

Answer 4

これは現在、CSS では不可能ですが (ブラウザーはこの種のシンテックスをサポートしていません)、開発者としてはLESSまたはSASSを使用することができます(これらは最も一般的です)。

LESS は、変数、ミックスイン、操作、関数などの動的な動作で CSS を拡張します。

SASS は CSS3 の拡張であり、ネストされたルール、変数、ミックスイン、セレクターの継承などを追加します。コマンド ライン ツールまたは Web フレームワーク プラグインを使用して、整形式の標準 CSS に変換されます。

ここで 2 つを比較することもできます。