CSSが変数と階層をネイティブにサポートしないのはなぜですか？

私はUI開発は初めてですが、CSSがどのように機能するかについて非常に不快に感じています。

私のユースケースは、特定のスタイルをdivページの特定の内部に適用したかったということです。

CSSの試行：

div.class1 {
    font: normal 12px arial, helvetica, sans-serif;
    font-color: #f30;
}
div.class1 div.class2 {
    border: 1px solid #f30;
}

より少ない試み：

@red: #f30;
@font-family: arial, helvetica, sans-serif;
div.class1 {
    font: normal 12px @font-family;
    font-color: @red;
    div.class2 {
        border: 1px solid @red;
    }

それは繰り返すようにあなたを強制ので、CSSのバージョンでは、バグを誘発することができます#f30＆div.class2あなたは階層変数の再利用を実現しようとするたびに。

私の質問：

• なぜCSSが物事を難しくしているのですか？
• LESSは特別なことは何もしません-明らかな改善を行い、CSSに変換するだけですか？
• そのような冗長なコーディングスタイルを促進するために、CSSはユーザーを動機づけたいと考えています。

CSSはLESSと同じであると強く信じています。確かに、CSSで物事がそのように行われる理由の明らかな利点を見落としています。これはレガシーな問題だと思っていましたが、CSS3でこれを解決しようとする試みが見られなかったときは驚きました。

CSSにどのようにアプローチすればよいかを理解してください。

CSSは、目的をより難しくすることを目的としておらず、はるかに単純な目標を念頭に置いて設計されており、変数と階層が唯一の欠点となることはほとんどありません。LESSとSassは、これらの欠点に対処するために特別に存在します。どちらかの機能がネイティブにサポートされるまで、それらに固執する必要があります。

とはいえ、W3CのCSSワーキンググループは、CSS変数とCSS階層の両方のドラフトに取り組んでいます。

• CSS変数モジュールレベル1
• CSS階層モジュールレベル3

いずれかのドラフトの実装準備が整う時期、または主要なブラウザーがそれらを採用する時期を知る方法はまったくありません。私が言えることは、CSS変数ドラフトが採用に近づいているということです。Chrome、Safari、FirefoxでドライブCSS変数を既にテストできますが、3つすべてのブラウザーでのサポートは実験的であり、変更される可能性があることに留意してください。読むCSS変数を使用して詳細については、MDNに。