组件库都在使用CSS变量了-技术圈

组件库都在使用CSS变量了

共 1400字，需浏览 3分钟

2022-11-29 20:28

CSS 变量是一个非常有用的功能，几乎所有浏览器都支持。（IE：啊这？)

如何解决 IE 关于 css var 的适配问题呢？

通过 webpack 的 postcss-loader + postcss-css-css-variable 编译生成固定的代码。

:root {  --white: #fff;  --black: #000;}a {  border: 1px solid var(--white);}span {  color: var(--black);}

通过 webpack 的 postcss-loader + postcss-css-css-variable 编译，上述代码转变成。

a {  border:1px solid #fff;  border: 1px solid var(--white);}span {  color: #000;  color: var(--black);}

这样一来在 IE 上面，样式就直接会使用上面设定好的，而不管下面的 var 变量了。

通常，element-plus 自定义主题，如果您的项目也使用了 SCSS，可以直接修改 Element Plus 的样式变量。创建一个 element/index.scss 文件来合并你的变量和 element-plus 的变量。

import { createApp } from 'vue'import './styles/element/index.scss'import ElementPlus from 'element-plus'import App from './App.vue'
const app = createApp(App)app.use(ElementPlus)

还可以通过 CSS 变量设置，现在 element-plus 中用 css 变量来重构了几乎所有组件的样式系统。

这意味着你可以动态地改变组件内的个别变量，以便更好地自定义组件样式，而不需要修改 SCSS 文件重新编译一次。

如果你只想自定义一个特定的组件，只需为某些组件单独添加内联样式。

<el-tag style="--el-tag-bg-color: red">Tag</el-tag>

如果您想要通过 js 控制 css 变量，可以这样做：

// document.documentElement 是全局变量时const el = document.documentElement// const el = document.getElementById('xxx')
// 获取 css 变量getComputedStyle(el).getPropertyValue(`--el-color-primary`)
// 设置 css 变量el.style.setProperty('--el-color-primary', 'red')

如果你想要更优雅的方式，你可以引入 VueUse 使用 useCssVar 方法。

import { useCssVar } from '@vueuse/core'
const el = ref(null)const color = useCssVar('--color', el)

VueUse：一个日益增长的 Vue 组合式函数集合。源代码本身就是一份不错的学习资料。