简单说 CSS变量
版权声明：本文为博主原创文章，欢迎转载，转载请注明出处。 https://blog.csdn.net/FE_dev/article/details/77869291
说明
变量，我想大家一定知道是什么？在CSS中也是有变量的，我们今天就来说说。
解释
1、声明CSS变量
语法： –变量名
例如：
body{
--bg:red;
}2、使用CSS变量
语法： var( 变量名[, 默认值 ]) 例如：
body{
--bg:red;
background:var(--bg);
} 效果图：
这里写图片描述
body{
/*变量没有定义,使用后面的值作为元素的属性值*/
background:var(--bg,blue);
} 效果图：
这里写图片描述
3、注意
变量名不能包含$，[，^，(，%等特殊字符，并且变量名是大小写敏感的 变量的定义和使用只能在声明块{}里面
--bg:red;
body{
background:var(--bg); /*获取不到--bg*/
}变量如果需要和其他字符串拼接，直接使用就可以不需要用别的运算符
body:before{
--con:'css';
content:var(--con)'变量';
}但是要注意如果是数值与单位拼接的话需要用 calc() 函数
body{
--w:100; /* 这里是数值，不是字符串 */
width:calc(var(--w)*1px);
}calc() 函数用于动态计算长度值。想了解更多关于calc() 函数的知识，点这里 http://www.runoob.com/cssref/func-calc.html
总结
我们可以把css变量理解为css的自定义属性，就和background一样，这样会好明白些，变量重复了，哪个会起作用就看css属性的优先级，优先级高的起作用。
body{
--bg:red;
background:var(--bg);
}
#body{
--bg:blue;
background:var(--bg);
}
<body id="body"></body>效果图：
这里写图片描述
而通过js也可以操作css变量
// 设置变量
document.body.style.setProperty('--bg', 'red');
// 读取变量
document.body.style.getPropertyValue('--bg');
// 'red'
// 删除变量
document.body.style.removeProperty('--bg');本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017年09月06日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录