开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第30天，点击查看活动详情

前言

使用 CSS 变量方便设计颜色等属性。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。

定义变量

变量分为全局变量和局部变量。

全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部(本身和子级)使用。

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

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

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

在:root内定义全局变量，变量定义格式为 --变量名，需要以--两个短杠开头，

使用变量

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高级】变量详解

前言