您的位置：首页 > Web前端 > CSS

简单说 CSS变量

2017-09-06 17:36 176 查看

说明

变量，我想大家一定知道是什么？在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>


效果图：



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 变量 自定义属性 var 简单说
相关文章推荐
新的分享
章节导航