css - CSS変数の複数のコード

Question

簡単な質問だと思いますが、グーグルで助けになるものは何も見つかりませんでした。

私は次のコードを持っています：

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

今では複数のCSSクラスで使用しています。また、ボックスのサイズを変更したい場合は、すべてのステートメントで変更したくありません。だから私はいくつかのCSS変数を使用したいと思います。しかし、CSS変数に複数のステートメントを定義する例は見つかりません。解決策はありますか？

私がすでに試したこと：

@boxsizing: 
(
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
)

Answer 1

Vanilla CSSは、意図した方法で変数を使用しません。

このような動作を行うには、動的コードファイルから（有効な）CSSを生成するための他のツールが必要です。例は次のとおりです。

• 以下
• SASS

Answer 2

CSSには変数のようなものはありません。たとえば、複数のセレクターに同じスタイルを定義することで、コードをよりドライにすることができます。

.boxsizing, #my_element, div, a.foobar {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 3

そのためにはSCSSのようなものが必要です。