blog-md
blog-md copied to clipboard
jiangjiu
unocss使用指南
介绍
Unocss是一个具有高性能且极具灵活性的即时原子化 CSS 引擎。可以通过预设等配置达到和 Tailwind/Windi 等原子化框架相同的行为。此外，uno具有性能更好，更灵活等优势，参考原子化CSS框架对比 在使用unocss来写原子化css之前，除了阅读unocss文档，同时建议阅读tailwindcss或windicss的文档，因为这两个框架文档更完善，从中能学习到原子化css的更多知识。 📖【unocss】Github Readme 📖【unocss】重新构想原子化 CSS 📖【tailwindcss】官方文档 📖【windicss】官方文档
目标
基础目标：
- 将项目中适合原子化的样式切换为原子化类名，不适合原子化的保留原来的class+style写法。初步实践对项目常用css改写原子化输出了规范。css属性原子化规范 进阶目标：
- 对项目中常用的样式组合做抽象，通过unocss提供的shortcuts及rules等功能自定义规则，简化原子化类名的书写，这些规则需要结合实际项目进行积累。
开发前准备
插件
vscode编译器提供了unocss的提示插件，安装后鼠标悬停在类名上会展示编译后的css代码。
但是，目前unocss插件还不支持预设类名的自动补全，按照这个issue讨论的方法，可以在项目中添加tailwind.config.js配置文件，再安装tailwindcss的插件，可以蹭一下tailwindcss的自动补全提示（因为unocss提供的预设是Tailwind / Windi CSS 的超集，所以一开始不熟悉预设类名有哪些时，可以去这俩框架的文档中查找并使用）。
tailwind.config.js这个配置文件是为了开发更便捷，与项目配置并无关系，目前没有加入到脚手架中，如果有需要可以自行引入。
配置文件
import {
defineConfig,
presetUno,
presetAttributify,
} from 'unocss';
import transformerVariantGroup from '@unocss/transformer-variant-group';
import transformerCompileClass from '@unocss/transformer-compile-class';
export default defineConfig({
presets: [
presetAttributify(), // 启用属性化模式
presetUno(), // 启用常见框架的预设
],
transformers: [
transformerVariantGroup(), // 启用变体组合
transformerCompileClass(), // 启用类名压缩
],
// 主题扩展
theme: {
fontFamily: { // 把用到的fontFamily放这里
'Barlow': 'Barlow Bold',
'FZLTCHJW': 'FZLTCHJW',
},
colors: {
'yellow': {
light: '#fffbd3',
DEFAULT: '#fffacd',
},
},
},
// 自定义层级顺序
layers: {
'my-layer': 10,
default: 1,
'rules': -10,
'shortcuts': -20,
},
// 自定义规则
rules: [
// 静态规则
['r-bg-red', { background: '#ff0000' }],
// 动态规则
[/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` }), {layer: 'my-layer'}],
],
// 快捷样式组合
shortcuts: [
// 静态别名
{
'bg-common': 'bg-[length:100%] bg-no-repeat',
'flex-center': 'flex justify-center items-center',
'translate-center': 'left-50% top-50% translate--50%',
},
// dynamic shortcuts
[/^text-gradient-to-(.*)$/, ([, c]) => `bg-gradient-to-${c} bg-clip-text text-transparent`],
],
});
配置项介绍
theme
通过配置可以扩展主题，你可以在配置中制定主题属性，制定的属性将被合并到默认主题中。 常见的width、height、colors、fontSize等均支持扩展主题(不是所有属性都支持，例如backgrounfSize不支持)，更多主题属性参见文档：主题属性文档 theme: { // ... colors: { 'veryCool': '#0000ff', // 新增一个颜色 text-veryCool bg-veryCool 都可以应用该颜色 'red': { 500: '#fd9000', // 覆盖默认red-500的颜色 } }, } ⚠️注意 不是所有属性都支持扩展主题，例如backgrounfSize就不支持。所以实现background-size: 100% 需要[]。即: bg-[length:100%]
rules
尽管预设提供了大部分常见的基础实用类名，但并不能满足更多复杂的样式和需求，可以使用rules自定义更多实用类名规则，简化css的使用。
- 相同layer的rule，后定义的优先级高，与使用时的顺序无关。
-
例如：定义了my-bg-blue和my-bg-red，当这俩规则同时应用在一个元素上展示为红色。 rules: [ // 静态规则 ['my-bg-blue', { background: '#007fff' }], ['my-bg-red', { background: '#ff0000' }],
// 动态规则 // 自定义1/4margin值 [/^m-(\d+)$/, ([, d]) => ({ margin:
${d / 4}rem}), {layer: 'my-layer'}], // 自定义层级，若不声明layer默认值为'default' ]
-
shortcuts
将复用度很高的实用类名进行组合，通过快捷别名进行使用。
- 快捷别名会生成额外的css，滥用会导致体积增大，建议复用度很高的组合才使用缩写。
- 相同layer的shortcut，优先级是按缩写字符的Unicode编码排序的，与定义顺序、使用顺序都无关。
- 例如：一个元素同时应用 my-text-1 和 my-text-2 时，my-text-2的属性优先级高。
shortcuts: [
// 静态shortcuts
{
'my-text-2': 'bg-blue-500 text-#fff',
'my-text-1': 'bg-green-500 text-#000',
},
['flex-center', 'flex justify-center items-center', { layer: 'my-layer' }], // 自定义层级，若不声明layer默认值为'shortcuts'
// 动态shortcuts
[/^text-gradient-to-(.*)$/, ([, c]) =>
bg-gradient-to-${c} bg-clip-text text-transparent], ]
- 例如：一个元素同时应用 my-text-1 和 my-text-2 时，my-text-2的属性优先级高。
shortcuts: [
// 静态shortcuts
{
'my-text-2': 'bg-blue-500 text-#fff',
'my-text-1': 'bg-green-500 text-#000',
},
['flex-center', 'flex justify-center items-center', { layer: 'my-layer' }], // 自定义层级，若不声明layer默认值为'shortcuts'
// 动态shortcuts
[/^text-gradient-to-(.*)$/, ([, c]) =>
layers
css生成顺序会影响其生效优先级，通过layer控制层级顺序。
- 预设实用类名的layer为'default'
- rules的layer默认值为'default'
- shortcuts的layer默认值为'shortcuts' 通过如下方式控制各层级顺序： layers: { components: -1, default: 1, utilities: 2, 'my-layer': 3, }
Rules Merging
unocss会将同一层级，相同内容的类名合并生成，以减小css体积。
各种css优先级
!important > 内联样式 > 内部样式表 > 导入样式表 > unocss 若不自定义layer，unocss中各项优先级为：rules > 预设实用类名(utilities) > shortcuts
各种css优先级 !important > 内联样式 > 内部样式表 > 导入样式表 > unocss
这个优先级是在哪里设置的,还是内部就是默认这样子了
