----
什么是css自定义属性
官方称之为 自定义属性 ,但我比较习惯叫它 变量 ,简单点说就是一种开发者可以自主命名和使用的 CSS 属性.
CSS变量和预处理器中的变量有什么不同?...我们可以在 样式表中 ,在 内联样式 中,在 SVG的标签 中直接使用CSS变量,甚至可以在 运行时 用JavaScript直接修改它。但是我们是 无法 对预处理器中的变量做上面这些操作的....当然,可以同时使用CSS变量和预处理变量,他们是不冲突的.
CSS变量:语法
变量的声明
css变量的定义由--开头,这样浏览器能够区分 自定义属性 和 原生属性 ,从而将它俩分开处理。...如果想要将--theme-color设置为全局变量,处处可用,我们使用:root伪元素
:root {
--theme-color: gray;
}
同一个CSS变量,可以在多个选择器内声明。...VUE3.0中,可以在CSS中使用 响应式变量, 通过下图可以看出,它的原理就是运用了CSS自定义属性
我们先在HelloWorld.vue中写入下方代码,我们使用定时器两秒以后修改color的值,