如何在unocss中使用css变量

小红2024-10-15 18:04

前言

最近遇到一个需求，在unocss中使用变量（本人项目uniapp + vite + ts + unocss + scss）实现动态去切换页面风格，当然你也可以选择手写样式引用scss变量或者less变量，然而我并不想写~ 🤔

unocss本身是不能直接使用变量作为选择器或类名的，（具体原因自己去看unocss，啰啰嗦嗦下不了班了🤣），但是可以使用css变量，利用var函数是可以实现，直接上招咯~

* 将uniapp中已有uni.scss生成uni.css

（当然你勤快的话，也可以一个个手敲👍，弊端我就不说了，自己酝~），上代码👇

js 复制代码

const fs = require('fs')
const path = require('path')
// 读取uni.scss
const scssContent = fs.readFileSync('./src/uni.scss', 'utf8')
// 由scss变量生成css变量（less变量自己看着调一下就行）
const scss2Css = () => {
  // 使用正则表达式提取 SCSS 变量
  const variableRegex = /\$([\w-]+):\s*([^;]+)(?=[;\s]|$)/g
  let cssVariables = ''
  let match
  while ((match = variableRegex.exec(scssContent)) !== null) {
    // 变量名
    const variableName = match[1].replace(/[A-Z]/g, '-$&').toLowerCase()
    // 变量值
    const variableValue = match[2].trim()
    // 转换为 CSS 自定义属性
    cssVariables += `--${variableName}: ${variableValue};\n`
  }
  // 生成 CSS 内容
  const cssContent = `:root { ${cssVariables} }`.trim()
  // 写入 CSS 文件
  fs.writeFileSync(path.join(__dirname, './src/uni.css'), cssContent, 'utf8')
}
scss2Css()

下面是由uni.scss生成的css变量文件

在入口文件中引入生成的uni.css

我是在main中引入的

在代码中使用css变量

csharp 复制代码

*记住方括号和var函数别掉了*

效果

写完啦，是不是贼简单~，自己在项目中灵活运用，第一次写文章，略感羞涩，不喜勿喷，后续会陆陆续续写一写自己踩过的坑，也欢迎佬们多多指教，有不足之处，虚心接受佬们赐教！

预告

下一篇想写一写vue路由二级以上路由缓存问题，好久没写业务了，不知道这个问题还有没有，long long ago这个问题困扰过我，不过顺利完成项目交付啦~😉