unocss 使用变量

例如 <div class="sidebar-container text-red"></div>
red用变量代替
css变量 var

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
  }

使用<div class="sidebar-container text-[var(--primary-color)]"></div> 变量用[]包起来 [var(–primary-color)]
sass变量
sass变量在编译时被替换为具体的值，不能直接在uno里使用，打包编译时，css的处理有个先后顺序
sass变量需要和css的变量结合起来 给uno用

.scss文件
sass变量
$primary-color: #3498db;
$secondary-color: #2ecc71;

:root {
  --primary-color: #{$primary-color};
  --secondary-color: #{$secondary-color};
}

把这个scss文件在用的地方导入
然后

<div class="sidebar-container  text-[var(--primary-color)]"></div>