前端 - unocss能否直接使用css变量？

Question

比如定义了一个变量 --text-color:red,能否则直接使用类名color-[--text-color]或者类似的其他能直接用变量名的写法

Answer 1

可以在 unocss 的配置文件里进行 theme color 配置，然后就可以随意组合使用了

theme: {  colors: {    'info': '#bfbfbf', // class="text-info"    'content': {      'primary': 'fe003b',  // class="text-content-primary"    },  },}

如果需要直接使用 css 变量的话可以直接写成 class="text-[--red-color]" 或者 class="text-$red-color"

Answer 2

在 UnoCSS 中，你可以直接使用 CSS 变量来定义样式。但是，UnoCSS 本身并不支持直接使用变量名作为类名或选择器。

如果你想使用 CSS 变量来定义样式，你可以按照以下方式进行操作：

1. 在你的 CSS 文件中定义一个变量，例如 --text-color: red;。
2. 在 UnoCSS 的样式表中，你可以通过 var() 函数来引用该变量，例如 color: var(--text-color);。

这样，你就可以在 UnoCSS 中使用 CSS 变量来定义样式了。请注意，由于 UnoCSS 的限制，你不能直接使用变量名作为类名或选择器。你需要使用 var() 函数来引用变量的值，并将其应用到相应的样式规则中。

如果你想更方便地使用 CSS 变量，你可以考虑使用其他支持 CSS 变量的预处理器或框架，例如 Sass 或 Less。这些工具提供了更强大的功能和更灵活的语法，可以让你更轻松地使用 CSS 变量来定义样式。