绿谭树影塘池镜潭半身树，碑石砾木水清处

封面是某处的池塘，应该是夏天，天气很热。树枝在水边照镜子，我在树下乘凉。

胡言乱语

深圳和成都

几个月前去深圳旅游，后来又在成都找了工作，对两个城市的感受大为不同。深圳恰恰与成都相反。走在深圳的人行道上你会接受一切电动车呼啸而过的速度，还会有无数喇叭在你后面催促。而且，深圳的人行道和自行车道似乎是不分家的，在成都，虽然也有电车乱跑，但大多数还是比较稳重的。尤其明显的是在地铁站口，上下行时。你可以看到深圳极少有人等着电梯，多数人选择步梯。而成都，很少人选择步梯，多数人宁愿等着也要乘电梯，所以你可以看到成都的电梯口往往有一大堆人，而旁边步梯却寥寥无几。其实即使相离很近的城市，氛围也相当不同，比如重庆和成都。不同的城市因为地域和文化而显现出不同的人文和社会现象，这应该就是每个城市的魅力所在。

值得分享

UnoCSS
一个即时按需的原子化 CSS 引擎。它采用全新的架构设计，将原子化 CSS 的灵活性和性能推向新高度
Tailwind CSS
最流行的原子化 CSS 框架。它彻底改变了前端开发方式，让开发者无需离开 HTML 即可快速构建自定义设计
Master CSS
新一代原子化 CSS 框架，它采用独特的语法设计和运行时策略，在保持原子化优势的同时解决传统方案的痛点

编程手札

UnoCSS 初体验

UnoCSS 是一个即时按需生成的原子化 CSS 引擎，个人比较喜欢

动手体验

安装并配置

bash

pnpm i -D unocss

在 vite 中配置插件

typescript

import { defineConfig } from 'vite'
import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [
    UnoCSS(), // 添加插件
  ],
})

创建配置文件 uno.config.ts

typescript

import { defineConfig, presetUno, presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(), // 默认预设，兼容 Tailwind/WindCSS
    presetIcons(), // 图标预设，直接使用图标
  ],
  // 自定义快捷方式
  shortcuts: {
    'btn': 'px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600',
  },
})

引入 CSS在模板中使用

在入口文件中引入

typescript

import 'virtual:uno.css'

就可以在模板中直接使用了

html

<!-- 标准原子类 -->
<div class="text-center text-red-500 m-4">
  Hello UnoCSS
</div>

<!-- 使用自定义快捷方式 -->
<button class="btn">点击我</button>

<!-- 使用图标 (无需下载 SVG) -->
<div class="i-carbon-logo-github text-3xl"></div>

使用预设

预设是 UnoCSS 的核心，你可以使用默认预设也可以为自己的项目自定义

typescript

import { defineConfig, presetAttributify, presetWind3 } from 'unocss'

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

预设决定了你能在代码里写什么样的 Class，以及这些 Class 会生成什么样的 CSS

属性化写法

UnoCSS 支持属性化写法，使代码更清晰，尤其适合 JSX/Vue

html

<!-- 传统写法 -->
<button class="bg-blue-500 text-white rounded px-4 py-2">
  Button
</button>

<!-- UnoCSS 属性化写法 -->
<button 
  bg="blue-500 hover:blue-600" 
  text="white" 
  rounded 
  px="4" 
  py="2"
>
  Button
</button>

图标集成
unocss 内置了图标，你可以直接使用
html
```
<i class="i-mdi-home"></i>
<i class="i-logos-vue"></i>
```

规则定制

如果你不喜欢 m-4 这样的写法，也可以定义自己的规则。

typescript

// uno.config.ts
export default defineConfig({
  rules: [
    ['font-sans', { 'font-family': 'Inter, sans-serif' }],
    [/^bg-(\w+)$/, ([, color]) => ({ 'background-color': `#${color}` })],
  ],
})

总结
unocss 是一个更加全面的原子类css，更加灵活和更易个性化设置。

清闲半日

美食：《肥肠粉+牛肉锅盔》
这两天馋上肥肠粉加锅盔了，谁发明的？甚是完美。
电视剧：《难破MG5 ナンバMG5》
搞笑片，我是大哥大是正常人变不良，这部就是不良变正常人，除了打戏有些出戏外，搞笑热血感动。很推荐，而且我觉得演技最好的是阿松
音乐：《六月的雨》——胡歌
怀念看仙剑的日子😭

绿谭树影塘池镜潭半身树，碑石砾木水清处 ​

胡言乱语 ​

值得分享 ​

编程手札 ​

清闲半日 ​

绿谭树影塘池镜潭半身树，碑石砾木水清处

胡言乱语

值得分享

编程手札

清闲半日