ホームページ > 記事 > ウェブフロントエンド > CSSで変数を定義できるのでしょうか?
CSSで変数を定義できます。変数定義の構文は「--変数名」で、CSS で定義された変数名は大文字と小文字が区別されます。var() 関数を使用して変数を読み取ることができます。構文は「var(--変数名)」です。関数の 2 番目のパラメータは、変数のデフォルト値を表します。変数が存在しない場合は、このデフォルト値が使用されます。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
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 サイトの他の関連記事を参照してください。