CSS高级功能：原生变量

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变量实现换肤功能

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

以上是 CSS高级功能：原生变量 的全部内容， 来源链接： utcz.com/a/12625.html

回到顶部