CSS 变量，你的下一个设计利器(Part 1)-优快云博客

本文介绍了CSS变量的基本概念及其使用方法，包括如何定义和使用CSS变量、作用域规则、默认值设定等，并提供了多个示例帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随着SASS，LESS，POSTCss的流行，对原生的CSS标准也有了推动作用，虽然目前还没有级连方式定义，但是CSS已经开始支持CSS Variables又可以称作CSS custom properties，这样我们不但可以复用属性值，也能通过Javascript来动态改变，实现动画效果。

CSS变量的定义

定义CSS变量的方法很简单，只要加上--前缀就可以了，比如设置变量size，那么就这么写--size，而使用变量的时候需要使用var()这个CSS函数，来个更详细的栗子好了

div{
    --size: 16px;
    font-size: var(--size);
}
复制代码

这就是使用CSS变量最简单的方法了，不过这里需要注意的一点是CSS变量是有作用域的，比如我这里是在<div>中定义了--size这个变量，那么在<a><h1><h2>...这样的标签中就是无法使用的，这样使用不方便啊！总不可能在每个标签中都这样定义一遍吧，那怎么做到属性的复用呢？

那么你是否还记得:root这个选择子呢？没错，使用这个选择子就能在根元素中设置CSS变量，相当于全局变量了，那么再来一个栗子吧。

:root{
    --size: 16px;
}

div {
    font-size: var(--size);
}
复制代码

CSS变量还有默认值的概念，还是先来看一个栗子吧

div {
    --text-color: pink;
    color: var(--text-color, black);
}
复制代码

很简单，就是var()函数的第二个参数就是默认值，在--text-color没有定义的情况下，就会使用black这个值了，那么假如我要实现多个默认值该如何呢？再举一个栗子吧。

div{
    --text-color1: pink;
    --text-color2: yellow;
    color: var(--text-color1, --text-color2, black);
}
复制代码

这样就行了。NO！！！！这是错误的方法！！！！正确的应该是这么写

div{
    --text-color1: pink;
    --text-color2: yellow;
    color: var(--text-color1, var(--text-color2, black));
}
复制代码

要通过复用var()函数才能实现多个默认值。

OK，更多使用方法稍后在分解，今天到此咯