原子化CSS.md

原子化CSS

原子化CSS是一种CSS架构方式，其支持小型、单一用途的类，其名称基于视觉功能。

<!-- 原子化类定义 -->
<style>
  .text-white { color: white; }
  .bg-black { background-color: black; }
  .text-center { text-align: center; }
</style>

<!-- 原子化类使用 -->
<div class="text-white bg-black text-center">hello Atomic CSS</div>

UnoCSS

• https://github.com/unocss/unocss

• https://unocss.dev

• 了解UnoCss - 重新构想原子化 CSS

• unocss小程序预设，在 taro uniapp 原生小程序 中使用unocss

• 效果预览 https://uno.antfu.me/play

• 样式查询 https://unocss.dev/interactive/?s=red

• 图标查询 https://icones.js.org/

使用

# @unocss/preset-uno：工具类预设
# @unocss/preset-attributify：属性化模式支持
# @unocss/preset-icons：icon支持
# @unocss/preset-rem-to-px：Rem 转 px 预设
cnpm i -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons @unocss/preset-rem-to-px

vite.config.js

import { defineConfig } from 'vite'
// 引入UnoCSS
import UnoCSS from 'unocss/vite';
import { presetUno, presetAttributify, presetIcons } from 'unocss';
import presetRemToPx from '@unocss/preset-rem-to-px';

export default defineConfig({
  plugins: [
    vue(),
    UnoCSS({
        presets: [
          presetUno(),
          presetAttributify(),
          presetIcons(),
          presetRemToPx({
            // 1单位 = 4px -- 如果CSS中没有设置HTML的font-size，那么浏览器默认的字号是16px。 16px / 4px => 1rem = 4px
            baseFontSize: 4,
          }),
        ],
        // 自定义规则 https://unocss.dev/config/rules
        // rules: [['m-1', { margin: '1px' }]],
      }),
  ],
})

main.js

// UnoCSS
import 'virtual:uno.css';

使用

<div
  class="text-center m-a w-200 h-200 text-100px lh-200px color-red"
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="lg white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200">
  hello world
</div>

vscode插件 -- UnoCSS -- 代码预览提示

https://unocss.dev/integrations/vscode

其它 - 预设

https://unocss.dev/presets/

Package	Description
@unocss/preset-uno	默认预设(现在它相当于@unocss/preset-wind)
@unocss/preset-mini	最小但重要的规则和变体
@unocss/preset-wind	Tailwind / Windi CSS 紧凑预设
@unocss/preset-attributify	为其他预设和规则提供属性模式
@unocss/preset-tagify	为其他规则启用标记模式
@unocss/preset-icons	由 Iconify 提供支持的纯 CSS 图标解决方案
@unocss/preset-web-fonts	网络字体（Google Fonts等）支持
@unocss/preset-typography	排版预设
@unocss/preset-rem-to-px	将 rem 转换为 px 以供 utils 使用

Windi CSS

• https://github.com/windicss/windicss
• https://cn.windicss.org/

Tailwind CSS

• https://github.com/tailwindlabs/tailwindcss