动态样式新纪元：UnoCSS的全方位探索

酷酷的阿云
715 阅读5分钟

1、什么是UnoCSS？

UnoCSS是一个即时按需的原子化CSS引擎，它的核心理念是灵活和可扩展。它不像传统的CSS框架那样预设一套工具类，而是允许开发者通过配置文件定义自己的CSS工具类。

注意这里的关键词是CSS引擎，也就是说UnoCss本身只是一个生产原子化css的工具，而它的生成规则则取决于你的unocss配置项。你可以使用官方默认的presetUno，也可以在社区找到其他的预设包。

[下面的代码我们都将默认采用presetUno进行讲解]

2、原子化

原子化是UnoCSS的核心概念，它将CSS分解为最小可复用的单元。这些原子可以是单个样式属性，也可以是一组属性的组合。通过原子化，你可以非常灵活地组合和重用样式。

一个class只负责一个样式属性，这是原子化最基本的特征，这样我们才能进行无限的复用和组合。

<!-- 示例代码 -->
<div class="m-1">Hello</div>

.m-1 { margin: 0.25rem; }

3、属性模式

如果你不喜欢写class，UnoCSS还支持在HTML标签的属性中直接使用工具类，而不需要在class中编写。这种方式使得代码更加简洁，并且易于理解。

首先，需要在配置文件加入presetAttributify

import presetAttributify from '@unocss/preset-attributify'

export default defineConfig({
  presets: [
    presetAttributify({ /* preset options */ }),
    // ...
  ],
})

接下来就可以开启属性模式：

<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

4、reset

UnoCSS默认不提供样式重置，以保持最大的灵活性。但如果你单独使用UnoCSS，可以使用如Normalize.css等重置库。你也可以选择UnoCSS提供的快速选择的样式重置。

// 示例代码
import '@unocss/reset/normalize.css'

你可以在官网找到其他的reset库

5、高度可定制

UnoCSS允许你通过配置文件来高度定制化你的CSS工具类。你可以定义自己的颜色、规则、快捷方式、主题、变体等，以满足你的设计需求。

5.1 colors自定义颜色

export default defineConfig({
// 主题
    theme: {
        // 颜色名
        colors: {
            f8: '#f8f8f8',
            f5: '#f5f5f5',
        }
    },
})

<!-- 示例代码 -->
<div class="text-f8 border-(solid f5)">Hello</div>

5.2 shortcuts快捷方式

// 示例配置
export default defineConfig({
  shortcuts: [
    { 'btn': 'px-4 py-2 font-semibold rounded-lg shadow-md' },
  ]
})

<!-- 示例代码 -->
<div class="btn">Hello</div>

5.3 rules自定义规则

// 示例配置
export default defineConfig({
  rules: [
  // 静态规则，将覆盖默认m-1生成规则
    ['m-1', { margin: '1px' }],
   // 动态规则
   [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })], 
   [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],
  ],
})

<div class="m-100">
  <button class="m-3">
    <icon class="p-5 m-1" />
    My Button
  </button>
</div>

以上规则将会生成以下css：

.m-1 { margin: 1px }
.m-100 { margin: 25rem; }
.m-3 { margin: 0.75rem; }
.p-5 { padding: 1.25rem; }

5.4 临时自定义变量

很多时候，如果只是为了一两个颜色或者规则去添加unocss配置文件，会显得有些麻烦，因为复用型可能没那么高，这种时候我们可以采用自定义临时变量的方式来进行开发：

<span class="text-[#f80] text-15px">Hello掘金</span>

代码很简单，将字号设置15px，颜色为#f80

6、vscode插件

UnoCSS提供了VSCode插件，这个插件可以提供自动补全、代码提示、实时预览等功能，极大地提高了开发效率。它还支持在编辑器中显示匹配的工具类和生成的CSS规则。

插件地址

安装插件以后，你就可以在VS中实时预览自己的class样式，一眼就知道书写是否正确

image.png

image.png

7、分组

UnoCSS允许你通过变体组的方式来分组工具类，这样可以更方便地管理和应用一系列的样式。

首先需要安装和配置transformerVariantGroup插件

import transformerVariantGroup from '@unocss/transformer-variant-group'
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...
  transformers: [
    transformerVariantGroup(),
  ],
})

    <div class="bg-red-500 dark:(bg-blue-500 text-white font-bold)">Dark mode example</div>

以上代码将会被编译为：

    <div class="bg-red-500 dark-bg-blue-500 dark-text-white dark-font-bold">Dark mode example</div>

8、class编译

UnoCSS提供了编译类转换器，可以将一组类编译成一个类，减少HTML中的类数量，使得代码更加简洁。

首先还是需要引入和使用transformerCompileClass插件

import transformerCompileClass from '@unocss/transformer-compile-class'
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...
  transformers: [
    transformerCompileClass(),
  ],
})

在class前添加上:uno:前缀

<!-- 示例代码 -->
<div class=":uno: flex items-center justify-between bg-gray-200 p-4 text-center sm:text-left">Hello掘金<div>

编译后的HTML代码：

<div class="uno-qlmcrp">Hello掘金<div>

编译后的CSS代码：

/* 编译后的CSS代码 */
.uno-qlmcrp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #eee;
  padding: 16px;
}

9、inspector

通过安装@unocss/inspector，我们将能够预览unocss编译后的代码效果：

image.png 还能看到哪些class被使用率高，以及具体被使用的文件

image.png

同时，它还提供了一个REPL，用于根据你当前的配置测试你的实用程序。

image.png

10、！！不要动态拼接class

const nameColor = ref('blue')

<h2 :class="`text-${nameColor}`">酷酷的啊云</h2>

上面的代码虽然可以正确的被编译为class="text-blue"，但是unocss并没有生成该class的样式。 这是因为unocss的机制并不是预设，而是引擎，它在编译并不知道我们需要text-blue，因此不会生成。

正确的做法有两种：

10.1 明确声明可能的class

    <h2 :class="nameColor === 'blue' ? 'text-blue' : 'text-black' ">酷酷的啊云</h2>

这样的话，unocss就会把可能出现的class 都编译出来。

10.2 配置safelist

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

export default defineConfig({
  safelist: [
    'text-red',
    'text-blue',
    // 添加所有可能的动态类名
  ],
})

我们预先声明那些动态生成的类名，以确保它们在最终的CSS中被包含。

谢谢阅读，最后希望这篇文章对你的开发有所帮助！

avatar
文章
阅读
粉丝