CSSで変数を定義できるのでしょうか？

CSSで変数を定義できます。変数定義の構文は「--変数名」で、CSS で定義された変数名は大文字と小文字が区別されます。var() 関数を使用して変数を読み取ることができます。構文は「var(--変数名)」です。関数の 2 番目のパラメータは、変数のデフォルト値を表します。変数が存在しない場合は、このデフォルト値が使用されます。

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS で変数を定義できますか?

CSS で変数を使用できます。

CSS 変数を宣言する場合は、変数名の前に 2 つのハイフン (--) を追加します。変数名では大文字と小文字が区別されます。 --header-color と --Header-Color は 2 つの異なる変数です。

var() 関数は変数を読み取るために使用されます。

var() 関数は、2 番目のパラメーターを使用して変数のデフォルト値を表すこともできます。変数が存在しない場合は、このデフォルト値が使用されます。

2 番目のパラメータは内部のカンマやスペースを処理せず、パラメータの一部とみなされます。

css 変数使用例:

    :root{
      --base: yellow;
      --spacing: 10px;
      --blur: 10px;
    }

上記のコードは 3 つの変数を定義し、:root により誰でもアクセスできるようにします

    img{
      filter: blur(var(--blur));
      padding: var(--spacing);
      background: var(--base);
 
    }

上記では、以前に定義された変数を属性値として使用します。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSSで変数を定義できるのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。