定义语法:--variableName: value;
变量名称(variableName
)使用规范:
<style type="text/css">
/* 这里定义的变量是全局的 */
:root {
--main-bg-color: brown;
--1: red;
--_: blue;
--飞: green;
}
/* -fz1 相当于局部变量,在其他地方不能用 */
p {
--fz14: 14px;
color: var(--1);
}
em {
color: var(--飞);
/* 第二个参数是默认值 */
font-size: var(--fz14, 16px);
}
</style>
var(--color): red
;url(var(--url))
;--size:20; font-size: var(--size)px
会解析成font-size: 20 px
;不能直接和数值单位连用
.foo {
--gap: 20;
/* 无效 */
margin-top: var(--gap)px;
}
使用 calc() 函数,将它们连接。
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
目前现代浏览器都支持 检测方法
@supports ( (--size: 0)) {
/* 支持 */
}
@supports ( not (--size: 0)) {
/* 不支持 */
}
if (window.CSS && window.CSS.supports && window.CSS.supports('--size', 0)) {
/* 支持 */
}
与 CSS 的"层叠"(cascade)规则是一致的。 看例子
var rootStyles = getComputedStyle(document.documentElement);
var value = rootStyles.getPropertyValue('--variableName');
// 获取某个元素中定义的属性变量
value = element.style.getPropertyValue('--variableName');
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');
// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary');
操作前
image.png
操作后
image.png
可以结合媒体查询实现不同的尺寸采用不同的变量值
/* 先定义一些变量,如主配色和次要配色 */
body {
--primary: red;
--secondary: blue;
}
/* 为元素应用配色 */
a {
color: var(--primary);
text-decoration-color: var(--secondary);
}
/* 当小屏幕使用另外一套配色方案 */
@media screen and (min-width: 768px) {
body {
--primary: black;
--secondary: orange;
}
}
示例
https://www.cnblogs.com/bibibobo/p/6140659.html http://www.ruanyifeng.com/blog/2017/05/css-variables.html