css变量

css变量 -----------css自定义变量，用–表示自定义

1.可以在data中定义{styleVar：{’–color’:“red”}},

vue2：绑定到元素标签的 :style中(:style=“styleVar”),选择器使用 color：var(–color)；
vue3：绑定到vue组件内<style vars="{styleVar['--color']}">的vars中，选择器使用 color：var(–color)

2.也可以在样式中直接定义

.parent {
  /*  变量的作用域就是它所在的选择器的有效范围，所以.parent 读取不到 child 中的变量  */
  color: var(--body-child);
  /*  定义变量  */
  --parent-color: blue;
}
.child {
  /*  通过 var 读取变量  */
  color: var(--parent-color);
  --child-color: green;
}

3.需要注意的是，变量的作用域就是它所在的选择器的有效范围，比如 .child 中定义的 --child-color: green;， 在 .parent 读取不到的，只针对 .child 元素下的元素有效

4.CSS 变量区别大小写

5.var() 参数可以使用第二个参数设置默认值，当该变量无效的时候，就会使用这个默认值

6.CSS 变量提供了 JavaScript 与 CSS 通信的一种途径，在 JS 中我们可以操作 CSS，跟操作普通的 CSS 属性是一样的