组件库都在使用CSS变量了

Posted 2022-12-13 前端精髓

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 组合式函数集合。源代码本身就是一份不错的学习资料。