【实战技巧】CSS自定义属性以及在VUE3中的使用

什么是css自定义属性

官方称之为 自定义属性 ,但我比较习惯叫它 变量 ,简单点说就是一种开发者可以自主命名和使用的 CSS 属性.

CSS变量和预处理器中的变量有什么不同？

CSS变量是浏览器中直接可用的CSS属性，而预处理中的变量是用于编译成常规的CSS代码，浏览器其实对它们一无所知。

我们可以在 样式表中 ，在 内联样式 中，在 SVG的标签 中直接使用CSS变量，甚至可以在 运行时 用JavaScript直接修改它。但是我们是 无法 对预处理器中的变量做上面这些操作的.

当然,可以同时使用CSS变量和预处理变量,他们是不冲突的.

CSS变量：语法

变量的声明

css变量的定义由--开头，这样浏览器能够区分 自定义属性 和 原生属性 ，从而将它俩分开处理。

假如只是定义了一个自定义元素和它的属性值，浏览器是不会做出反应的。如下面的代码， .foo的字体颜色由color决定，但--theme-color对.foo没有作用。

.foo {
  color: red;
  --theme-color: gray;
}

我们可以用CSS自定义元素存储任意有效的css属性值,比如

.foo {
  --theme-color: blue;
  --spacer-width: 8px;
  --favorite-number: 3;
  --greeting: "Hey, what's up?";
  --reusable-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.85);
}

变量名是 区分大小写 的,所以--Hello和--hello是两个变量。

变量的使用

var()函数用来读取变量

.button {
  background-color: var(--theme-color);
}

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。也可以把另一个变量作为默认值。

.button {
  background-color: var(--theme-color,#ffffff);
  background-color: var(--theme-color,var(--theme-textColor));
}

var()函数还可以用在变量的声明。

.foo {
  --theme-color: gray;
  --theme-textColor:var(--theme-color)
}

如果变量值是数值，不能与数值单位直接连用。而需要使用calc()函数，将它们连接。

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

.foo {
  --gap: 20;
  /* 有效 */
  margin-top: calc(var(--gap) * 1px);
}

如果变量值带有单位，不能写成字符串。

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

变量的作用域

如果想要将--theme-color设置为全局变量，处处可用,我们使用:root伪元素

:root {
  --theme-color: gray;
}

同一个CSS变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。优先级的高低同css选择器，如 id选择器 > 类选择器 > 标签选择器 等.

换句话说，变量的作用域就是它所在的选择器的有效范围.

<style>
  :root { --color: blue; }
  div { --color: green; }
  #box { --color: red; }
  * { color: var(--color); }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="box">红色</div>

CSS自定义属性可以在行内style属性中使用

<!-- HTML --> 
<button style="--color: blue">Click Me</button> 
// CSS 
button { 
    border: 1px solid var(--color); 
} 
button:hover { 
    background-color: var(--color); 
}

javascript操作css变量

css变量最厉害的作用就体现于此.

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

这意味着，JavaScript可以将 任意值 存入样式表.

const docStyle = document.documentElement.style;
document.addEventListener('mousemove', (e) => {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);
});

VUE3的自定义属性使用

VUE3.0中,可以在CSS中使用 响应式变量, 通过下图可以看出,它的原理就是运用了CSS自定义属性

我们先在HelloWorld.vue中写入下方代码,我们使用定时器两秒以后修改color的值,看一看视图会不会发生变化

<template>
  <div class="text">
    测试自定义属性
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive } from 'vue';

export default defineComponent({
  name: '',
  setup() {
    const state = reactive({
      color: 'red',
    });
    onMounted(() => {
      setTimeout(() => {
        state.color = 'green';
      }, 2000);
    });
    return {
      state,
    };
  },
});
</script>

<style lang='scss'>
.text {
  color: v-bind("state.color");
}
</style>

看一下结果,是不是很简单,就是在CSS中使用v-bind绑定一个响应式变量即可,就可以在变量改变的时候完成视图的刷新。

参考

CSS 变量教程