unocss-preset-css-vars v0.0.5

unocss-preset-css-vars

安装

# pnpm
pnpm add unocss-preset-css-vars -D
# npm
npm i unocss-preset-css-vars -D
# yarn
yarn add unocss-preset-css-vars -D

使用

// vite.config.ts
import { defineConfig } from 'unocss'
import type { Theme } from '@unocss/preset-uno';
// 1.导入预设
import presetCssVars from 'unocss-preset-css-vars'

export default defineConfig({
  presets: [
    // 2.配置预设
    presetCssVars<Theme>({
      theme: {
        colors: {
          primary: '#ff0000',
          secondary: '#00ff00',
          tertiary: '#0000ff',
        },
      }
    })
  ]
})

配置项

prefix

• type: string
• default: 'theme'

生成的css变量的前缀名，不带--

theme

• type: Unocss.Theme
• default: {}

动态化的主题配置，根据这个生成css变量，配置规则等同于unocss.theme

defaultValues

• type: string[]
• default: ["DEFAULT"]

theme配置中值相匹配的属性动态化时，会使用unocss.theme中同路径同属性的值作为最终值，未匹配到则不会动态化

例如：theme.colors.primary配置为'DEFAULT'，则会使用unocss.theme.colors.primary的值作为最终值

renderVarName

• type: (paths: string[], value: string) => string
• default: (paths) => paths.join('-')

生成css变量的名称，接收两个参数，第一个参数为路径数组，第二个参数为值，注意是不带前缀的

filterChecker

• type: (paths: string[], value: string, varName: string) => boolean
• default: () => true

过滤器，接收三个参数，第一个参数为路径数组，第二个参数为值，第三个参数为生成的css变量名称，返回false当前值将不会生成css变量

示例演示

许可证

MIT License