前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >unocss,(原子化css),项目初体验

unocss,(原子化css),项目初体验

作者头像
玖柒的小窝
修改2021-11-08 09:35:06
6.2K0
修改2021-11-08 09:35:06
举报
文章被收录于专栏:各类技术文章~各类技术文章~

unocss 简单介绍

原子化 CSS 是一种 CSS 的架构方式,它倾向于小巧用途单一的 class,并且会以视觉效果进行命名。

UnoCSS 是一个引擎,而非一款框架,因为它并未提供核心工具类,所有功能可以通过预设和内联配置提供。


unocss 其实就是提供所有你可能需要用到的 CSS 工具。例如,传统方案,你可能会用预处理器(这里选用的是 SCSS)生成如下代码:

代码语言:javascript
复制
// style.scss

@for $i from 1 through 10 {
  .m-#{$i} {
    margin: $i / 4 rem;
  }
}
复制代码

编译结果为:

代码语言:javascript
复制
.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校验,增加个人开发的方式。

简单上手

安装

代码语言:javascript
复制
npm i -D unocss@latest
复制代码

or

代码语言:javascript
复制
yarn add -D unocss@latest
复制代码

引用

代码语言:javascript
复制
// 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()]
})
复制代码

preset

代码语言:javascript
复制
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,允许我们使用正则匹配,也可以使用自定义的值。第二项需要返回该使用方式对应的规则。

为了方便测试,下面自定义了一些自定义特殊的规则

项目使用

代码语言:javascript
复制
<div z-10 p-c></div>
<div f-c></div>

复制代码

生成的结果:

image.png
image.png

可以看到我们的自定义的规则已经使用成功了。

项目起步使用比较简单。大家可以踊跃尝试。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • unocss 简单介绍
  • 简单上手
    • 安装
      • 引用
        • preset
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档