2

1.声明

声明变量的时候,变量名前面要加两根连词线 --,声明的命名不能包含$[^(%等字符,普通字符局限于[0~9][a~z][A~Z]、下划线_和短横线-这些组合,但是可以是中文日文或者韩文。例如:

:root{
  --color1: #ccc;
  --宽度: 100px;
}

变量的值可以为各式各样的值,包括字符串。如:

:root{
    --text: 'Today is sunday.'
}
p:before{
    content: var(--text);
}

2.使用

变量的使用要用到var()函数来读取。
例如:

:root{
  --color1: #ccc;
  --宽度: 100px;
  --text1: 'Today is sunday.'
}
.test{
    width: var(--宽度);
    color: var(--color1);
    &:before{
      content: var(--text1);
    }
 }

线上效果:https://codepen.io/jianxiujiucan/pen/YzXXejL

如果变量值是数值,不能与数值单位直接连用,只能配合calc()函数使用。例如:

.test{
  --num: 100;
  width: var(--num)px; //无效
  width: calc(var(--num) * 1px); // 有效,等同于100px
}

声明过的变量也可以被新变量引用,例如:

:root{
  --color1: #ccc;
  --color2: var(--color1);
}

3.作用域

CSS变量的作用域与 CSS 的"层叠"(cascade)规则一致,全局声明,也可以局部声明。声明的变量可以被重新定义,按优先级来显示。这一点是预处理器的变量所达不到的。例如:

:root {
  --color1: #ccc;
  --color2: var(--color1);
}
.test {
    --color1: red;
}
.box .test {
   --color1: green;
}

效果如下:
https://codepen.io/jianxiujiucan/pen/ZEGbOVa

var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。例如:

color: var(--color3, #999); //如果--color3未定义,则使用颜色"#999"

4.原生变量与SASS的冲突

当原生变量的值定义为rgb()函数的值,在页面中调用它,那么Sass编译会报错。例如:

:root {
  --color: 255,90,100;
}
p {
  color: rgb(var(--color));
}

以上代码在原生的CSS里是没问题的,能正确读取到颜色值。
但是如果是在SCSS里,编译则会报错:
wrong number of arguments (1 for 3) for 'rgb'
因为SCSS自己封装了rgb函数,函数接收的值的格式必须是xxx,xxx,xxx,所以报错了。
但是,如果用rgba()函数,却又可以编译,例如:

:root {
  --color: 255,90,100;
}
p {
  color: rgba(var(--color), 1);
}

注:上述代码在codepen的sass模式下也无法生效,用vs code的插件live sass可以编译通过。

5.JS修改变量

sass的变量经过编译之后用js是没有办法修改的,而css原生变量却可以通过js重新赋值,这一点绝对是大大的优势啊。例如:

document.body.style.setProperty('--color1, red'); // 设置变量
document.body.style.getPropertyValue('--color1').trim();  // 读取变量
document.body.style.removeProperty('--color1'); // 删除变量

6. 实例:css变量实现换肤功能

image

https://jianxiujiucan.github.io/demo/skin.html


剑锈酒残
195 声望4 粉丝

我已忘了江湖原来的模样。