UnoCSS 自定义规则

UnoCSS 作为一款强大的原子化 CSS 框架，为我们提供了高效构建样式的方式。除了使用其预设的原子化类名，掌握 UnoCSS 的自定义规则技能，能让开发者根据项目的独特需求，定制出更贴合业务的样式规则，进一步提升开发的灵活性和效率。

为什么要自定义规则

虽然 UnoCSS 自带的预设规则已经涵盖了许多常见的样式需求，但在实际项目中，我们往往会遇到一些特殊的样式设定。比如，项目可能有特定的颜色主题、独特的布局方式或者特殊的交互效果，这些仅靠预设规则难以满足。通过自定义规则，我们可以将项目中反复出现的样式模式抽象成可复用的类名，不仅减少了重复代码，还能让代码结构更加清晰，维护起来更加方便。

自定义规则的基本语法

在 UnoCSS 中，我们通过在uno.config.js或uno.config.ts文件中配置rules选项来自定义规则。规则可以分为静态规则和动态规则两种类型。

静态规则

静态规则是最基础的自定义规则形式，它将一个固定的类名映射到一组 CSS 属性和值。例如：

import { defineConfig } from 'unocss'
export default defineConfig({
    rules: [
        ['text-primary', { 'color': '#007BFF' }],
        ['bg-secondary', { 'background-color': '#F8F9FA' }]
    ]
})

在上述代码中，我们定义了两个静态规则。text-primary类名将文本颜色设置为蓝色（#007BFF），bg-secondary类名将背景颜色设置为浅灰色（#F8F9FA）。在 HTML 中使用这些类名时，就会应用对应的样式：

<p class="text-primary">这是主要文本颜色</p>
<div class="bg-secondary">这是次要背景颜色</div>

动态规则

动态规则允许我们使用正则表达式来匹配类名，并根据匹配结果动态生成 CSS 样式。这种规则在处理一些具有规律的样式时非常有用。例如，我们想要创建一系列根据数字来设置字体大小的类名：

import { defineConfig } from 'unocss'
export default defineConfig({
    rules: [
        [/^text-size-(\d+)$/, ([, size]) => ({ 'font-size': `${size * 2}px` })]
    ]
})

这里的正则表达式/^text-size-(\d+)$/会匹配以text-size-开头，后面跟着一个数字的类名。匹配到的数字会作为参数传递给回调函数，在回调函数中，我们根据这个数字动态生成字体大小的样式，例如text-size-16会生成font-size: 32px的样式。在 HTML 中使用：

<p class="text-size-12">字体大小为24px</p>
<p class="text-size-16">字体大小为32px</p>

自定义规则的高级应用

结合主题配置

UnoCSS 支持主题配置，我们可以将自定义规则与主题相结合，实现更灵活的样式控制。比如，在主题中定义一套颜色变量，然后在自定义规则中引用这些变量：

import { defineConfig } from 'unocss'
export default defineConfig({
    theme: {
        colors: {
            primary: '#007BFF',
            secondary: '#F8F9FA'
        }
    },

    rules: [
        ['text-primary', ({ theme }) => ({ 'color': theme.colors.primary })],
        ['bg-secondary', ({ theme }) => ({ 'background-color': theme.colors.secondary })]
    ]
})

这样，当我们需要修改主题颜色时，只需要在theme对象中调整相应的颜色值，所有引用该主题颜色的自定义规则都会自动更新。

处理复杂的样式逻辑

对于一些复杂的样式逻辑，我们可以在自定义规则的回调函数中编写更多的逻辑代码。例如，创建一个根据屏幕宽度和元素位置来动态调整样式的规则：

import { defineConfig } from 'unocss'
export default defineConfig({
    rules: [
        [/^responsive-(\w+)-(\w+)$/, ([, screen, position]) => {
        let css = ''
        if (screen === 'desktop') {
            css += '@media (min-width: 992px) {'
        } else if (screen === 'tablet') {
            css += '@media (min-width: 768px) and (max-width: 991px) {'
        }

        if (position === 'left') {
            css += 'left: 0; '
        } else if (position === 'right') {
            css += 'right: 0; '
        }

        if (screen === 'desktop' || screen === 'tablet') {
            css += '}'
        }

        return css
        }]
    ]
})

这个规则可以根据不同的屏幕尺寸（desktop或tablet）和元素位置（left或right）生成相应的 CSS 样式。例如，responsive-desktop-left会在桌面屏幕（宽度大于等于 992px）上，将元素的左边距设置为 0。

总结

掌握 UnoCSS 的自定义规则技能，能在前端开发中更加得心应手。通过合理运用静态规则和动态规则，结合主题配置和处理复杂样式逻辑，我们可以为项目打造出高度定制化的样式系统。随着对这一技能的深入理解和实践，你会发现它在提升开发效率、优化代码结构以及实现独特样式效果方面的巨大潜力。在实际项目中不断尝试和探索，将 UnoCSS 自定义规则运用到极致，能为前端开发工作增添更多的灵活性和创造性。