序文

CSS 変数を使用して、色などのプロパティを簡単に設計します。同じ色を何度もコピーして貼り付ける代わりに、それらを変数に入れることができます。

変数を定義する

変数は、グローバル変数とローカル変数に分けられます。

グローバル変数はドキュメント全体でアクセス/使用できますが、ローカル変数はそれが宣言されているセレクター内 (それ自体と子の両方) でのみ使用できます。

    <style>
        /* 定义全局变量 */
        :root {
            --color: red;
        }

        /* 定义局部变量 */
        .main {
            --color: blue;
        }
    </style>
</head>

<body>
    <div class="main">
        dsfsds
    </div>
</body>

:root でグローバル変数を定義します。変数の定義形式は次のとおりです -- 変数名、先頭に 2 つのダッシュ、

変数を使用する

var() 関数は、CSS 変数の値を挿入するために使用されます。

    <style>
        /* 定义全局变量 */
        :root {
            --color: red;
        }

        /* 定义局部变量 */
        .main {
            --color: blue;
            color: var(--color);
        }
    </style>
</head>

<body>
    <div class="main">
        dsfsds
    </div>
</body>

特別な注意

キャラクターリンク

 <style>
        /* 定义全局变量 */
        :root {
            --color: red;
            /* 字符变量 */
            --a: 'sad';
            --b: 'dgr';
        }

        /* 定义局部变量 */
        .main::before {
            /* 连接字符 */
            content: var(--a)var(--b);
            --color: blue;
            color: var(--color);
        }
    </style>
</head>

<body>
    <div class="main">
    </div>
</body>

単位のない計算、および単位の追加。

    <style>
        /* 定义全局变量 */
        :root {
            --color: red;
            /* 字符变量 */
            --a: 'sad';
            --b: 'dgr';
            --size: 25;
        }

        /* 定义局部变量 */
        .main::before {
            /* 连接字符 */
            content: var(--a)var(--b);
            --color: blue;
            color: var(--color);
            /* 不可以直接连接px，必须双方是字符串。
            需要cale计算函数才可以 */
            font-size: calc(var(--size)*1px);
        }
    </style>
</head>

<body>
    <div class="main">
    </div>
</body>

変数 js の相互運用性

CSS 変数は DOM にアクセスできます。つまり、ローカルまたはグローバルスコープで変数を作成したり、JavaScript を使用して変数を変更したり、メディアクエリに基づいて変数を変更したりできます。

<style>
        /* 变量的定义  --变量名  */
        /* root 全局作用域 谁都可以使用
        在其他类名id下定义只有自己和子级能使用*/
        :root {
            --color: pink;
            --fs: 50;
        }
    </style>
    <script>
        //与js的关系
        window.onload = function () {
            var root = document.querySelector(':root');
            var styles = getComputedStyle(root);
            var fonts = styles.getPropertyValue('--fs') - 1;
            console.log(fonts);
            root.style.setProperty('--fs', 20)
        }
    </script>
</head>

<body>
    <div class="main">
        asd
    </div>
</body>

js で css 変数を使用し、値を取得して変更できます。

【CSS上級者向け】変数の詳しい説明

序文