CSS | CSS Variable | CSS变量

原生的 CSS 已经支持变量
W3C css-variables-1
浏览器支持状况

CSS Variable 允许在样式中声明变量，并通过函数使用
注意，var 是使用是使用是使用，定义变量是--
于此同时还带来了一些其他功能

功能

• 使用变量
• 变量计算
• 传值到js

流程：

• 找一个选择器，通常是全局 root
• 在花括号里使用--定义变量
• 在需要使用的选择器里使用var()获取变量的值

一个小栗子

    <p>我在demo外</p>
    <div class="demo">
        <p>我在demo里</p>
    </div>

/* global scope */
:root {
    /* CSS variables declarations */
    --main-color: #f40;
    --block-font-size: 10px;
}

body {
    /* use the variables */
    color: var(--main-color);
}
.demo p {
    font-size: calc(var(--block-font-size)*4);
}

展示效果如下：