foreword

Use CSS variables to easily design properties such as color. Instead of copying and pasting the same colors over and over, you can put them in variables.

define variable

Variables are divided into global variables and local variables.

A global variable can be accessed/used throughout the document, while a local variable can only be used inside (both itself and children) the selector in which it is declared.

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

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

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

Define global variables in :root. The variable definition format is -- variable name, which needs to start with -- two dashes,

use variables

The var() function is used to insert the value of a CSS variable.

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

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

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

special attention

character link

 <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>

Unitless calculations, and add units.

    <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>

Variable js interoperability

CSS variables have access to the DOM, which means you can create variables with local or global scope, modify variables using JavaScript, and modify variables based on media queries.

<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>

You can use css variables in js, get value and modify.

[CSS Advanced] Detailed explanation of variables