CSS - UnoCSS 使用技巧

CSS 变量

<div class="color-$el-color-primary"></div>
<div class="color-[var(--el-color-primary)]"></div>

屏幕断点

<div class="sm:bg-black"></div>
<div class="lt-sm:bg-black"></div>
<div class="at-sm:bg-black"></div>

!Important

<!-- 配合使用 transformerDirectives 在 scss 中可能会报错，例如 @apply !bg-black -->
<div class="!bg-black"></div>
<div class="important:bg-black"></div>

父子元素伪类控制

<div class="group hover:text-blue">
  <div class="group-hover:bg-yellow">子元素</div>
</div>

修改子元素样式

<div class="[&_.b]:text-yellow">
  <div class="b">子元素</div>
</div>

<!-- 类似 bem 规范类名下划线需转义 -->
<div class="[&_.el-form-item\_\_label]:text-yellow">
  <el-form>
    <el-form-item label="Label">Value</el-form-item>
  </el-form>
</div>

暗黑模式

unocss.dev/presets/win…

默认 presetWind3({ dark: 'class' })

<!-- 需配合样式类 -->
<div class="dark:bg-red:10" />

<!-- 将生成 -->
.dark .dark\:bg-red\:10 {
  background-color: rgb(248 113 113 / 0.1);
}

<!-- 使用媒体查询，与 dark: 'media' 生成结果一致 -->
<div class="@dark:bg-red:10" />

<!-- 将生成 -->
@media (prefers-color-scheme: dark) {
  .\@dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

presetWind3({ dark: 'media' })

<!-- 无需配合 dark 样式类 -->
<div class="dark:bg-red:10" />

<!-- 将生成 -->
@media (prefers-color-scheme: dark) {
  .dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

复合样式（任意值语法）

<div style="transition: opacity 0.3s ease-in-out"></div>
<div class="[transition:opacity_0.3s_ease-in-out]"></div>