原子化 CSS 是一种 CSS 的架构方式,它倾向于小巧
且用途单一
的 class,并且会以视觉效果进行命名。
UnoCSS 是一个引擎,而非一款框架,因为它并未提供核心工具类,所有功能可以通过预设和内联配置提供。
unocss
其实就是提供所有你可能需要用到的 CSS 工具。例如,传统方案,你可能会用预处理器(这里选用的是 SCSS)生成如下代码:
// style.scss
@for $i from 1 through 10 {
.m-#{$i} {
margin: $i / 4 rem;
}
}
复制代码
编译结果为:
.m-1 { margin: 0.25 rem; }
.m-2 { margin: 0.5 rem; }
/* ... */
.m-10 { margin: 2.5 rem; }
复制代码
或许你为了方便生成了一大堆可使用的class
,但是中间或许也有无效使用的产物。即使你只使用了其中一条 CSS 规则,但还是要为其余几条规则的文件体积买单。你的 CSS 文件会随着你的生成规则无上限的增大,以此类推,项目包的体积也会越来越大。但在项目中对使用的角度而言,这完全是不必要的。
例如Tailwind
就是这样,Tailwind
生成的 CSS 文件会有数 MB 的大小。为了解决这个问题,Tailwind 通过使用 PurgeCSS 来扫描你的大包产物并删除你不需要的规则。这得以使其在生产环境中 CSS 文件缩减为几 KB。然而,请注意,这个清除操作仅在生成构建下有效,而开发环境下仍要使用包含了所有规则巨大的 CSS 文件。这在 Webpack 中表现可能并不明显,但在 Vite 中却有着巨大的影响,毕竟其他内容的加载都非常迅捷。
结合Vite
的按需加载的理念,unocss
提供所见即所得的使用方式。并且提供插件预设进行增强,我们可以使用自定义规则进行rule
校验,增加个人开发的方式。
npm i -D unocss@latest
复制代码
or
yarn add -D unocss@latest
复制代码
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue({ script: { refSugar: true } }), Unocss()]
})
复制代码
import { UnocssPluginOptions } from 'unocss/vite'
import { presetUno, presetAttributify, presetIcons } from 'unocss'
export default (): UnocssPluginOptions => ({
presets: [presetAttributify(), presetUno(), presetIcons()], // 使用自带的内部预设, 按需引用
rules: [
[/^z-(\d+)$/, ([, d]) => ({ 'z-index': d })],
[
'p-c',
{
position: 'absolute',
top: '50%',
left: '50%',
transform: `translate(-50%, -50%)`
}
],
[
'f-c',
{
display: 'flex',
'justify-content': 'center',
'align-items': 'center'
}
]
]
})
复制代码
自定义rule
,允许我们使用正则匹配,也可以使用自定义的值。第二项需要返回该使用方式对应的规则。
为了方便测试,下面自定义了一些自定义特殊的规则
项目使用
<div z-10 p-c></div>
<div f-c></div>
复制代码
生成的结果:
可以看到我们的自定义的规则已经使用成功了。
项目起步使用比较简单。大家可以踊跃尝试。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。