npm package: @neatui/css
Description: neatui
Author: xiaojunbo
Latest version: 3.16.1

# @neatui/css

[http://neatui.fekit.cn](http://neatui.fekit.cn)

@neatui/css 是一个现代化的原子样式库，提供了丰富的预定义样式类，帮助开发者快速构建界面。

## 特性

- 🎨 主题系统：支持自定义主题色卡，内置智能色彩系统
- 📱 响应式：内置响应式设计支持
- 🎯 原子化：提供大量可复用的原子类
- 🔧 可定制：支持 SCSS 变量覆盖和扩展
- 📦 组件化：提供常用 UI 组件样式

## 核心模块

### 1. 基础样式 (basic)

提供了最基础的原子类：

- 尺寸控制：

  - `.full`, `.w-full`, `.h-full`: 100% 宽度/高度
  - `.min-full`, `.min-w-full`, `.min-h-full`: 最小宽度/高度 100%
  - `.max-full`, `.max-w-full`, `.max-h-full`: 最大宽度/高度 100%

- 文本对齐：

  - `.ac`: 居中对齐
  - `.al`: 左对齐
  - `.ar`: 右对齐
  - `.aj`: 两端对齐

- 垂直对齐：

  - `.vt`: 顶部对齐
  - `.vm`: 中部对齐
  - `.vb`: 底部对齐
  - `.avc`: 水平垂直居中

- 定位：

  - `.pr`: 相对定位
  - `.pa`: 绝对定位
  - `.pf`: 固定定位
  - `.ps`: 粘性定位

- 浮动：

  - `.fl`: 左浮动
  - `.fr`: 右浮动
  - `.fn`: 无浮动
  - `.cb`: 清除浮动

- 字重：
  - `.fw1` ~ `.fw9`: 字重 100-900
  - `.fw0`: 正常字重
  - `.fw-none`: 无字重
  - `.fw-auto`: 自动字重

### 2. 字号系统 (size)

- 全局字号：

  - `[size="xs"]` ~ `[size="xl"]`: 基础字号（从 xs 到 xl）
  - `[ui-size="xs"]` ~ `[ui-size="xl"]`: UI 组件字号

- 分级字号：

  - `.fs-xxs` ~ `.fs-xxl`: 字体大小（从极小到极大）
  - `.fs-{size}+`: 增加字号（+0.05rem）
  - `.fs-{size}*`: 双倍字号
  - `.fs-{size}-sub`: 子元素字号

- 行高：
  - `.lh-no`: 无行高
  - `.lh-xs`: 1倍行高
  - `.lh-ss`: 1.25倍行高
  - `.lh-sm`: 1.5倍行高
  - `.lh-ms`: 1.75倍行高
  - `.lh-mm`: 2倍行高
  - `.lh-ml`: 2.25倍行高
  - `.lh-ls`: 2.5倍行高
  - `.lh-lm`: 2.75倍行高
  - `.lh-ll`: 3倍行高
  - `.lh-xl`: 3.5倍行高

### 3. 弹性布局 (flex)

- 基础属性：

  - `[ui-flex]`: 弹性布局容器
  - `.flex-nowrap`: 不换行
  - `.flex-wrap`: 换行
  - `.flex-inline`: 行内弹性布局

- 弹性项：

  - `.flex-fixed`: 固定尺寸
  - `.flex-block`: 占满剩余空间
  - `.flex-grow`: 仅增长
  - `.flex-shrink`: 仅收缩

- 方向与对齐（使用 `[ui-flex~="..."]`）：

  - 行布局：

    - `row lt`: 左上对齐
    - `row lm`: 左中对齐
    - `row lb`: 左下对齐
    - `row ct`: 居中上对齐
    - `row cm`: 居中对齐
    - `row cb`: 居中下对齐
    - `row rt`: 右上对齐
    - `row rm`: 右中对齐
    - `row rb`: 右下对齐
    - `row xt`: 两端上对齐
    - `row xm`: 两端中对齐
    - `row xb`: 两端下对齐

  - 列布局：
    - `col lt`: 左上对齐
    - `col lm`: 左中对齐
    - `col lb`: 左下对齐
    - 其他同行布局

### 4. 边框系统 (border)

- 边框样式：

  - `.b-solid`: 实线边框
  - `.b-dashed`: 虚线边框
  - `.b-dotted`: 点线边框

- 边框宽度：
  - 全边框：`.b-no` ~ `.b-xl`（0px ~ 1rem）
  - 水平边框：`.bx-no` ~ `.bx-xl`
  - 垂直边框：`.by-no` ~ `.by-xl`
  - 顶部边框：`.bt-no` ~ `.bt-xl`
  - 右侧边框：`.br-no` ~ `.br-xl`
  - 底部边框：`.bb-no` ~ `.bb-xl`
  - 左侧边框：`.bl-no` ~ `.bl-xl`

尺寸等级：

- `no`: 0px
- `xs`: 1px
- `ss`: 2px
- `sm`: 3px
- `sl`: 4px
- `ms`: 5px
- `mm`: 0.5rem
- `ml`: 0.6rem
- `ls`: 0.7rem
- `lm`: 0.8rem
- `ll`: 0.9rem
- `xl`: 1rem

### 5. 主题系统 (theme)

- 系统默认色卡：

  - `--co-main`: 主色调 (#0889e4)
  - `--co-text`: 文本色 (#000000)
  - `--co-fore`: 前景色 (#ffffff)
  - `--co-back`: 背景色 (#f5f5f5)
  - `--co-link`: 链接色 (#d07950)
  - `--co-code`: 代码色 (#e23861)
  - `--co-well`: 成功色 (#4bbc73)
  - `--co-warn`: 警告色 (#fb9a2a)
  - `--co-risk`: 危险色 (#f95850)
  - `--co-info`: 信息色 (#0889e4)

- 扩展色系：

  - `--co-read`: 主要文本色 (85% 文本色)
  - `--co-desc`: 描述文本色 (55% 文本色)
  - `--co-note`: 注释文本色 (35% 文本色)
  - `--co-case`: 案例文本色 (20% 文本色)
  - `--co-line`: 线条色 (10% 文本色)
  - `--co-weak`: 弱化色 (4% 文本色)

- 透明度变体：
  每个颜色都支持以下透明度变体：
  - `xs`, `ss`, `sm`, `sl`, `ms`, `mm`, `ml`, `ls`, `lm`, `ll`, `xl`
    使用方式：`--co-{color}-{variant}`

### 6. 组件样式

每个组件都有其特定的样式类，以下是主要组件：

- 动画 (anim)：过渡和动画效果
- 按钮 (btns)：各种按钮样式
- 卡片 (card)：卡片容器样式
- 表单 (form)：表单元素样式
- 图标 (icon)：图标样式
- 图片 (imgs)：图片处理样式
- 分割线 (line)：分隔线样式
- 列表 (list)：列表样式
- 加载 (load)：加载动画
- 菜单 (menu)：菜单样式
- 导航 (navs)：导航样式
- 提示 (note)：提示文本样式
- 操作项 (opts)：操作按钮样式
- 路径 (path)：面包屑导航
- 侧边栏 (side)：侧边栏样式
- 步骤条 (steps)：步骤指示器
- 表格 (table)：表格样式
- 标签页 (tabs)：选项卡样式
- 标签 (tags)：标签样式
- 提示框 (tips)：提示框样式
- 标题 (title)：标题样式

## 使用方法

1. 安装依赖：

```bash
npm install @neatui/css
```

2. 引入样式：

```scss
// 全量引入
@import '@neatui/css/neatui.scss';

// 按需引入
@import '@neatui/css/core/basic.scss';
@import '@neatui/css/core/theme.scss';
// ... 其他需要的模块
```

3. 配置主题（可选）：

```scss
@use '@neatui/css/core/theme' with (
  $theme: (
    light: (
      main: #0889e4,
      text: #000000,
      // ... 其他颜色配置
    ),
    dark: (
      main: #2196f3,
      text: #ffffff,
      // ... 其他颜色配置
    ),
  )
);
```

## 响应式设计

所有样式类都支持响应式前缀：

- 默认：无前缀
- 平板：`pad:`
- 移动端：`mob:`

使用示例：

```html
<div class="flex-block pad:flex-fixed mob:flex-grow">
  <!-- 在不同设备上有不同的弹性布局行为 -->
</div>
```

## 最佳实践

1. 使用主题系统时，建议遵循 NeatUI 设计规范建立主题色卡
2. 优先使用预定义的原子类，避免重复编写样式
3. 合理使用响应式类，确保在不同设备上的最佳展现
4. 按需引入所需模块，减少不必要的代码体积
5. 使用语义化的组件类名，提高代码可维护性

## 贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进 @neatui/css。在提交之前，请确保：

1. 遵循项目的代码规范
2. 编写必要的文档和注释
3. 添加相应的测试用例

## 许可证

MIT License