unocss常用语法

Unocss是一个用于提取CSS的最佳实践并转换为只包含实际使用的类名的工具，它简化了前端样式管理，减少了CSS体积。Unocss的基本语法主要包括以下几个部分：

1. **`@apply`**：这是Unocss的核心指令，用于应用一组预设的CSS规则到某个元素上。例如：

   .my-element {
     @apply bg-blue text-white;
   }

2. **选择器**：你可以直接在`.unocss`文件中编写CSS选择器，Unocss会根据你在HTML中实际引用的类来生成最终的CSS。比如：

   /* 只有当.my-class被选中才会被保留 */
   .my-class {
     color: red;
   }

3. **变量 (`$`)**：可以定义全局变量来控制样式，方便统一调整：

   $primary-color: blue;

   .my-button {
     background: $primary-color;
   }

4. **插件支持**：Unocss也支持一些插件，如`unocss-vars`, `unocss-prefixer`等，可以处理更复杂的需求。

5. **忽略和排除**：使用`/* ignore */`注释来阻止某些规则被提取，或者指定哪些文件、元素或规则不应被处理。

6. **配置文件**：通过`.unocssrc.js`或`.unocssrc.yaml`配置文件自定义提取策略。

相关问题

unocss 语法加权重

### UnoCSS 中设置样式权重或优先级

在 UnoCSS 中，可以通过多种方式来控制样式的优先级。UnoCSS 是一个原子化 CSS 框架，它允许开发者通过组合简单的类名来自动生成所需的样式。

#### 使用 `!important`

为了确保某些样式具有更高的优先级，可以使用 `!important` 关键字。这会使得该样式声明覆盖其他任何相同属性的声明[^2]：

.class {
    color: red !important;
}

然而，在 UnoCSS 中直接编写自定义 CSS 并不是最推荐的做法。更常见的是利用框架本身提供的机制来调整优先级。

#### 利用选择器特异性

另一种方法是依靠选择器的具体度（specificity）。具体来说，可以通过增加更多特定的选择器来提升某条规则的重要性。例如，相比于单个 class 选择器 `.class` （其权重为 10），ID 选择器 `#id` 或者带有多个 class 的复合选择器 `.class1.class2` 将拥有更高的优先级[^4]。

对于 UnoCSS 用户而言，这意味着可以选择更加具体的预设类名称或者创建自己的高优先级实用工具类。

#### 自定义配置文件

如果上述两种方案仍无法满足需求，则还可以考虑编辑 UnoCSS 配置文件以引入新的 Atom 类并为其分配较高的重要性级别。通常情况下，这种操作涉及到修改项目的 uno.config.js 文件，并向 presets 添加额外选项。

下面是一个简单例子展示如何在一个假定的支持 UnoCSS 的项目里实现这一点:

// uno.config.js
import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['my-high-priority-rule', { 'color': '#ff0000' }],
  ],
})

在这个例子中，`rules` 数组内的每一项都代表一个新的 Atom 类及其对应的样式定义；这些新加入的规则将会按照它们被加载顺序应用到页面上，因此放置位置也会影响最终效果。