CSS变量和var()函数的应用

最新推荐文章于 2025-06-03 03:18:25 发布

朱桂彪

最新推荐文章于 2025-06-03 03:18:25 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css变量自定义css变量 var函数 js获取css变量 css

本文链接：https://blog.youkuaiyun.com/m0_37036014/article/details/105422636

本文深入解析CSS变量及var()函数的使用方法，包括语法、继承特性、多声明限制及JavaScript操作技巧，旨在帮助开发者高效管理和复用样式。

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

前言

今天晚上看youtube，无意间看到他页面的css代码，如下图 ⬇️
youtube代码
提取出图中画圈的css代码

img.yt-img-shadow {
    display: block;
    margin-left: var(--yt-img-margin-left, auto);
    margin-right: var(--yt-img-margin-right, auto);
    max-height: var(--yt-img-max-height, none);
    max-width: var(--yt-img-max-width, 100%);
    border-radius: var(--yt-img-border-radius, none);
}

之前没有用过这种 var(–yt-img-margin-left, auto) 变量的写法，于是乎就去查阅了一些资料和官方css变量规范，看了一下兼容性也很不错哦。

话不多说，接下来介绍一下css变量和var()函数的用法。

一、css变量

body {
  --foo: #7F583F;
  --urls: './img/xx.jpg';
}

如上述代码，意思为：
在body选择器里面声明了两个变量：–foo 和 –bar，

css声明变量不像Less的@foo，也不像sass的$foo，而是采取了不同形式的–foo，声明出来的变量和color、background-url 等正式属性没有什么不同，所以 CSS 变量又叫做"CSS 自定义属性"。

Tip： 变量的名称可以用数字、汉字等，不能包含**$，[，^，(，%**等字符，变量的值也是可以使用各种属性值：

:root{
  --黑色背景: #3a4b5c;
  --255: rgb(255, 255, 255);
  --pd: 10px 20px;
  --height: 200px;
  --transition-duration: .35s;
  --margin-top: calc(2vh + 20px);
}
div{
	color: var(--255);
	margin-top: var(--margin-top);
	padding: var(--pd);
	width: var(--height);
	height: var(--height);
	background-color: var(--黑色背景, #000);
}

:root是CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示元素，除了优先级更高之外，与 html 选择器相同

复制上述代码，会看到成果哦。

二、var()函数使用

看到了上面代码的效果，我们迫不及待的来看下 var() 函数是如何使用的

:root {
  --黑色背景: #3a4b5c;
}
body {
  background-color: var(--黑色背景, #000);
}

var(–黑色背景) 这段代码中，var() 函数是用来获取值自定义属性 –黑色背景的值。他代替元素中任何属性中的值的任何部分。var() 函数不能作为属性名、选择器或者其他除了属性值之外的值。

语法

var() 方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

:root {
  --黑色背景: #3a4b5c;
}
body {
  background-color: var(--黑色背, #000);
}

如上述代码，我们若打错了变量名，找不到这个变量，var() 函数就会使用传入的第二个参数 #000

三、CSS变量和var()函数应用和注意点

CSS变量的继承

自定义属性同样支持继承。一个元素上没有定义自定义属性，该自定义属性的值会继承其父元素：

<div class="one">
	<div class="two">
         two
       <div class="three">
              three
       </div>
       <div class="four">
              four
       </div>
     <div>
</div>
<style>
	.one { --test: 12px; }
    .two { font-size:var(--test); }
	.three { 
        --test: 14px; 
        font-size:var(--test);
    }
    .four { font-size:var(--test); }
</style>

其中 .two 找不到自己选择器里的 –test变量，就会找到 .one 里面声明的 –test，同样，.four 找 .one 的 –test。

但是这种方式我们项目中不推荐，最好通过在 :root 伪类上设置自定义属性，然后在整个文档需要的地方使用，可以减少很多的重复性。

CSS变量支持同时多个声明吗？

类似下面这样：
…
不好意思，类似不了，语法上就根本不支持。
自定义属性受级联的约束，并从其父级继承其值。

CSS变量的相互传递特性

就是说，我们在CSS变量定义的时候可以直接引入其他变量给自己使用，例如：

body {
  --green: #4CAF50;   
  --backgroundColor: var(--green);
  background:var(--backgroundColor);
}

或者更复杂的CSS3 calc()计算，例如：

body {
  --col: 3;
  --margins: calc(24px / var(--col));
}

JavaScript获取css变量

JavaScript 操作 CSS 变量的写法如下。

// 设置变量
document.body.style.setProperty('--黑色主题', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--黑色主题').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--黑色主题');

这意味着，JavaScript 可以将任意值存入样式表。下面是一个监听事件的例子，事件信息被存入 CSS 变量。

const docStyle = document.documentElement.style;
document.addEventListener('mousemove', (e) => {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);
});

是不是发现了新大陆啦~

四、结束语

在构建大型站点时，网页中所使用的 CSS 的数量是非常庞大的，并且在许多场合大量的信息会重复使用。例如，在网页中维护一个配色方案，意味着一些颜色在CSS文件中多次出现，并被重复使用。当你修改配色方案时，不论是调整某个颜色或完全修改整个配色，都会成为一个复杂的问题，不容出错，而单纯查找替换是远远不够的。

CSS变量为我们带来一些预处理器的便利，并且不需要像Less或Sass等额外的编译。

这些变量的第二个优势就是名称本身就包含了语义的信息。

其次JS可以获取CSS变量也可以设置CSS变量，大大增加了JS和CSS之间的联系。