🎨 MMS-SCSS 样式库使用文档 (优化版)

📋 目录

设计理念
命名规范
布局系统
尺寸系统
字体系统
间距系统
颜色系统
文本系统
边框与圆角
阴影系统
显示系统
工具类
动画系统
响应式系统
交互效果
加载状态
状态指示
特效系统
组件样式系统
交互状态
与WindiCSS协同工作
使用示例
CSS变量定义
动画关键帧
工具类别名
缩写别名
优化建议
支持与反馈

🎯 设计理念

MMS-SCSS 是一个为 MMS-UI 项目定制的工具类样式库，旨在与 WindiCSS 协同工作，提供更丰富的业务特定样式。

协同工作原则

WindiCSS：处理基础工具类（p-*, m-*, text-*, bg-* 等）
MMS-SCSS：处理业务特定样式（flex-*, justify-*, items-* 等）

统一标准

数值体系：4px 递增（0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64）
色彩体系：与 WindiCSS 共享 primary、success、warning、danger
断点体系：mobile(<640px), tablet(640-1023px), desktop(≥1024px)

📝 命名规范

MMS-SCSS 采用语义化命名，减少冗余前缀：

类型	命名规范	示例
布局类	直接语义化命名	`.flex-row`, `.items-center`
尺寸类	`w-`/`h-` + 数值或百分比	`.w-50`, `.h-full`
字体类	`font-` + 大小或粗细	`.font-lg`, `.font-bold`
间距类	`m`/`p` + 方向 + 数值	`.m-16`, `.pt-8`
颜色类	`text-`/`bg-` + 颜色名	`.text-primary`, `.bg-success`
动画类	`anim-` + 效果名	`.anim-fade-in`

🎯 布局系统

Flexbox 布局

html

<!-- 基本 Flex 布局 -->
<div class="flex-row">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- 垂直布局 -->
<div class="flex-col">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Flex 换行 -->
<div class="flex-row flex-wrap">
  <!-- 子元素 -->
</div>

类名	说明
`.flex-row`	水平排列（默认）
`.flex-col`	垂直排列
`.flex-wrap`	允许换行
`.flex-nowrap`	不换行

Flex 弹性比例

html

<div class="flex-row">
  <div class="flex-1">弹性区域</div>
  <div class="flex-2">弹性区域</div>
</div>

类名	说明
`.flex-0`	不弹性
`.flex-1` ~ `.flex-4`	弹性比例
`.flex-auto`	自动弹性
`.flex-none`	无弹性

对齐方式

html

<!-- 主轴对齐 -->
<div class="flex-row justify-center">
  <div>居中对齐</div>
</div>

<!-- 交叉轴对齐 -->
<div class="flex-row items-center">
  <div>垂直居中</div>
</div>

主轴对齐 (justify-*)

类名	说明
`.justify-start`	起始对齐
`.justify-center`	居中对齐
`.justify-end`	末尾对齐
`.justify-between`	两端对齐
`.justify-around`	平均分布

交叉轴对齐 (items-*)

类名	说明
`.items-start`	起始对齐
`.items-center`	居中对齐
`.items-end`	末尾对齐
`.items-stretch`	拉伸对齐

常用布局模式

html

<!-- 完全居中容器 -->
<div class="center-container">
  <div>完全居中内容</div>
</div>

<!-- 垂直居中 -->
<div class="vertical-center">
  <div>垂直居中内容</div>
</div>

<!-- 水平居中 -->
<div class="horizontal-center">
  <div>水平居中内容</div>
</div>

<!-- 两端对齐 -->
<div class="space-between">
  <div>左侧内容</div>
  <div>右侧内容</div>
</div>

<!-- 等间距分布 -->
<div class="space-around">
  <div>项目1</div>
  <div>项目2</div>
  <div>项目3</div>
</div>

类名	说明
`.center-container`	完全居中容器
`.vertical-center`	垂直居中
`.horizontal-center`	水平居中
`.space-between`	两端对齐
`.space-around`	等间距分布

定位系统

html

<!-- 浮动 -->
<div class="float-left">左浮动</div>
<div class="float-right">右浮动</div>

<!-- 定位 -->
<div class="relative">
  <div class="absolute top-0 left-0">绝对定位</div>
</div>

<!-- 居中定位 -->
<div class="relative">
  <div class="center-xy">绝对居中</div>
</div>

类名	说明
`.float-left`	左浮动
`.float-right`	右浮动
`.float-none`	清除浮动
`.relative`	相对定位
`.absolute`	绝对定位
`.fixed`	固定定位
`.center-xy`	绝对居中

溢出处理

html

<div class="overflow-hidden">隐藏溢出内容</div>
<div class="overflow-auto">自动滚动条</div>

类名	说明
`.overflow-auto`	自动显示滚动条
`.overflow-hidden`	隐藏溢出内容
`.overflow-visible`	可见溢出内容
`.overflow-scroll`	始终显示滚动条

层级控制 (z-index)

html

<div class="z-10">层级10</div>
<div class="z-20">层级20</div>

类名	说明
`.z-0`	层级 0
`.z-10`	层级 10
`.z-20`	层级 20
`.z-30`	层级 30
`.z-40`	层级 40
`.z-50`	层级 50
`.z-auto`	自动层级

清除浮动

html

<div class="clearfix">
  <div class="float-left">浮动元素</div>
</div>

类名	说明
`.clearfix`	清除浮动

📏 尺寸系统

宽度 (Width)

html

<div class="w-50">50% 宽度</div>
<div class="w-full">100% 宽度</div>
<div class="w-auto">自动宽度</div>

类名	说明
`.w-10` ~ `.w-100`	10%-100% 宽度 (10% 间隔)
`.w-auto`	自动宽度
`.w-full`	100% 宽度

高度 (Height)

html

<div class="h-full">100% 高度</div>
<div class="h-screen">视窗高度</div>

类名	说明
`.h-auto`	自动高度
`.h-full`	100% 高度
`.h-screen`	视窗高度

最大宽度/高度

html

<div class="max-w-md">最大宽度768px</div>
<div class="max-h-screen">最大高度视窗高度</div>

类名	说明
`.max-w-xs`	最大宽度 320px
`.max-w-sm`	最大宽度 480px
`.max-w-md`	最大宽度 768px
`.max-w-lg`	最大宽度 1024px
`.max-w-xl`	最大宽度 1280px
`.max-w-full`	最大宽度 100%
`.max-h-xs`	最大高度 320px
`.max-h-sm`	最大高度 480px
`.max-h-md`	最大高度 768px
`.max-h-lg`	最大高度 1024px
`.max-h-full`	最大高度 100%
`.max-h-screen`	最大高度视窗高度

最小宽度/高度

html

<div class="min-w-full">最小宽度100%</div>
<div class="min-h-screen">最小高度视窗高度</div>

类名	说明
`.min-w-xs`	最小宽度 320px
`.min-w-sm`	最小宽度 480px
`.min-w-md`	最小宽度 768px
`.min-w-full`	最小宽度 100%
`.min-h-xs`	最小高度 320px
`.min-h-sm`	最小高度 480px
`.min-h-md`	最小高度 768px
`.min-h-full`	最小高度 100%
`.min-h-screen`	最小高度视窗高度

类名	说明
`.text-{size}`	数值字体 (10, 12, 14, 16, 18, 20, 24, 28, 32)
`.font-xs`	10px
`.font-sm`	12px
`.font-base`	14px
`.font-md`	16px
`.font-lg`	18px
`.font-xl`	20px
`.font-2xl`	24px
`.font-3xl`	30px

🔤 字体系统

字体粗细

html

<div class="font-bold">粗体文字</div>
<div class="font-light">细体文字</div>

类名	说明
`.font-thin`	100
`.font-light`	300
`.font-normal`	400
`.font-medium`	500
`.font-semibold`	600
`.font-bold`	700
`.font-extrabold`	800
`.font-black`	900

文本转换

html

<div class="text-uppercase">大写文本</div>
<div class="text-lowercase">小写文本</div>
<div class="text-capitalize">首字母大写</div>

类名	说明
`.text-uppercase`	转换为大写
`.text-lowercase`	转换为小写
`.text-capitalize`	首字母大写

文本溢出省略

html

<div class="text-ellipsis">单行文本溢出省略</div>
<div class="text-ellipsis-2">多行文本溢出省略</div>

类名	说明
`.text-ellipsis`	单行省略
`.text-ellipsis-2`	两行省略

📐 间距系统

采用 4px 递增体系：0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64

html

<!-- 外边距 -->
<div class="m-16">四周外边距 16px</div>
<div class="mt-8">上外边距 8px</div>

<!-- 内边距 -->
<div class="p-12">四周内边距 12px</div>
<div class="pt-4">上内边距 4px</div>

外边距 (Margin)

类名	说明
`.m-{size}`	四周外边距
`.mt-{size}`	上外边距
`.mr-{size}`	右外边距
`.mb-{size}`	下外边距
`.ml-{size}`	左外边距

内边距 (Padding)

类名	说明
`.p-{size}`	四周内边距
`.pt-{size}`	上内边距
`.pr-{size}`	右内边距
`.pb-{size}`	下内边距
`.pl-{size}`	左内边距

间距组合

html

<!-- 内边距组合 -->
<div class="p-xy-16">四周内边距16px</div>
<div class="ptb-16">上下内边距16px</div>
<div class="plr-16">左右内边距16px</div>

<!-- 外边距组合 -->
<div class="m-xy-16">四周外边距16px</div>
<div class="mtb-16">上下外边距16px</div>
<div class="mlr-16">左右外边距16px</div>

类名	说明
`.p-xy-{size}`	四周内边距
`.ptb-{size}`	上下内边距
`.plr-{size}`	左右内边距
`.m-xy-{size}`	四周外边距
`.mtb-{size}`	上下外边距
`.mlr-{size}`	左右外边距

支持的尺寸值：0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64

🎨 颜色系统

文字颜色

html

<div class="text-primary">主色文字</div>
<div class="text-success">成功色文字</div>

类名	说明
`.text-primary`	#1e97f8
`.text-success`	#2dac34
`.text-warning`	#fe6701
`.text-danger`	#f56c6c
`.text-info`	#909399
`.text-black`	#000000
`.text-white`	#ffffff
`.text-gray-dark`	#333333
`.text-gray`	#666666
`.text-gray-light`	#999999

背景颜色

html

<div class="bg-primary">主色背景</div>
<div class="bg-success">成功色背景</div>

类名	说明
`.bg-primary`	#1e97f8
`.bg-success`	#2dac34
`.bg-warning`	#fe6701
`.bg-danger`	#f56c6c
`.bg-white`	#ffffff
`.bg-gray`	#f5f5f5
`.bg-transparent`	透明背景

透明度

html

<div class="opacity-50">50% 透明度</div>
<div class="opacity-0">完全透明</div>

类名	说明
`.opacity-0`	0% 透明度
`.opacity-25`	25% 透明度
`.opacity-50`	50% 透明度
`.opacity-75`	75% 透明度
`.opacity-100`	100% 透明度

✍️ 文本系统

html

<div class="text-center">居中文本</div>
<div class="text-ellipsis">文本溢出省略</div>

类名	说明
`.text-left`	左对齐
`.text-center`	居中对齐
`.text-right`	右对齐
`.text-nowrap`	不换行
`.text-break`	强制换行
`.text-underline`	下划线
`.text-line-through`	删除线
`.text-no-decoration`	无装饰
`.text-ellipsis`	单行省略
`.text-ellipsis-2`	两行省略

🖼️ 边框与圆角

边框

html

<div class="border-1">带边框</div>
<div class="border-t">上边框</div>

类名	说明
`.border-0`	无边框
`.border-1`	1px 边框
`.border-t`	上边框
`.border-b`	下边框
`.border-l`	左边框
`.border-r`	右边框

圆角

html

<div class="rounded-lg">大圆角</div>
<div class="rounded-full">圆形</div>

类名	说明
`.rounded-none`	无圆角
`.rounded-sm`	2px 圆角
`.rounded`	4px 圆角
`.rounded-md`	6px 圆角
`.rounded-lg`	8px 圆角
`.rounded-full`	圆形

shadowsystem

html

<div class="shadow-lg">大阴影</div>
<div class="shadow-none">无阴影</div>

类名	说明
`.shadow-none`	无阴影
`.shadow-sm`	小阴影
`.shadow`	默认阴影
`.shadow-md`	中等阴影
`.shadow-lg`	大阴影

👁️ 显示系统

html

<div class="hidden">隐藏</div>
<div class="flex">Flex 显示</div>

类名	说明
`.hidden`	隐藏
`.block`	块级显示
`.inline`	行内显示
`.inline-block`	行内块显示
`.flex`	Flex 显示

🔧 工具类

html

<div class="clearfix">清除浮动</div>
<div class="cursor-pointer">鼠标指针</div>

类名	说明
`.clearfix`	清除浮动
`.overlay`	遮罩层
`.cursor-pointer`	鼠标指针
`.cursor-not-allowed`	禁止鼠标

🎬 动画系统

基础动画

html

<div class="fade-in">淡入动画</div>
<div class="slide-up">上滑动画</div>

类名	说明
`.fade-in`	淡入
`.fade-out`	淡出
`.slide-up`	上滑
`.slide-down`	下滑
`.slide-left`	左滑
`.slide-right`	右滑
`.zoom-in`	放大
`.zoom-out`	缩小
`.bounce`	弹跳
`.shake`	抖动
`.pulse`	脉冲
`.spin`	旋转
`.ping`	扩散

过渡效果

html

<div class="transition-all">全属性过渡</div>

类名	说明
`.transition-all`	全属性过渡

📱 响应式系统

断点系统

断点	屏幕宽度	说明
`sm`	< 640px	移动设备
`md`	640px - 1023px	平板设备
`lg`	≥ 1024px	桌面设备

响应式工具类

html

<!-- 移动端隐藏 -->
<div class="sm-hidden">移动端隐藏</div>

<!-- 平板显示 -->
<div class="md-block">平板显示</div>

<!-- 桌面端隐藏 -->
<div class="lg-hidden">桌面端隐藏</div>

Grid 网格系统

html

<div class="resp-grid resp-grid-3 resp-gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

类名	说明
`.resp-grid`	网格容器
`.resp-grid-1` ~ `.resp-grid-6`	1-6 列网格
`.resp-gap-1` ~ `.resp-gap-6`	网格间距

容器类

html

<div class="resp-container">自适应容器</div>
<div class="resp-container-sm">小容器</div>
<div class="resp-container-lg">大容器</div>

类名	说明
`.resp-container`	默认容器 (1200px)
`.resp-container-sm`	小容器 (640px)
`.resp-container-lg`	大容器 (1440px)

设备显示控制

html

<div class="resp-show-mobile">仅移动端显示</div>
<div class="resp-show-tablet">仅平板显示</div>
<div class="resp-show-desktop">仅桌面显示</div>

类名	说明
`.resp-show-mobile`	仅移动端显示
`.resp-show-tablet`	仅平板显示
`.resp-show-desktop`	仅桌面显示

🖱️ 交互效果

悬停效果

html

<div class="interact-hover-lift">悬停提升</div>
<div class="interact-hover-scale">悬停缩放</div>

类名	说明
`.interact-hover-lift`	悬停提升
`.interact-hover-scale`	悬停缩放
`.interact-hover-glow`	悬停发光
`.interact-hover-darken`	悬停变暗
`.interact-hover-brighten`	悬停变亮

按钮效果

html

<button class="interact-btn-primary">主色按钮</button>

类名	说明
`.interact-btn-primary`	主色按钮

卡片效果

html

<div class="interact-card-hover">悬停卡片</div>

类名	说明
`.interact-card-hover`	悬停卡片

⏳ 加载状态

html

<div class="loading-spinner"></div>
<div class="loading-dots"></div>
<div class="loading-skeleton"></div>

类名	说明
`.loading-spinner`	旋转加载
`.loading-dots`	点状加载
`.loading-skeleton`	骨架屏

🚦 状态指示

html

<div class="status-success">成功状态</div>
<div class="status-warning">警告状态</div>
<div class="status-error">错误状态</div>
<div class="status-info">信息状态</div>

类名	说明
`.status-success`	成功状态
`.status-warning`	警告状态
`.status-error`	错误状态
`.status-info`	信息状态

🎨 组件样式系统

卡片样式

html

<div class="card">基础卡片</div>
<div class="card card-hover">悬停卡片</div>

类名	说明
`.card`	基础卡片
`.card-hover`	悬停卡片

按钮样式

html

<button class="btn">基础按钮</button>
<button class="btn btn-sm">小型按钮</button>
<button class="btn btn-lg">大型按钮</button>
<button class="btn btn-block">块级按钮</button>

类名	说明
`.btn`	基础按钮
`.btn-sm`	小型按钮
`.btn-lg`	大型按钮
`.btn-block`	块级按钮

表单元素

html

<input type="text" class="form-control" placeholder="输入框">
<label class="form-label">标签</label>

类名	说明
`.form-control`	表单控件
`.form-label`	表单标签

图标样式

html

<i class="icon-sm">16px 图标</i>
<i class="icon-md">24px 图标</i>
<i class="icon-lg">32px 图标</i>
<i class="icon-xl">48px 图标</i>

类名	说明
`.icon-sm`	16px 图标
`.icon-md`	24px 图标
`.icon-lg`	32px 图标
`.icon-xl`	48px 图标

🔄 交互状态

html

<div class="disabled">禁用状态</div>
<div class="selected">选中状态</div>
<div class="active">激活状态</div>

类名	说明
`.disabled`	禁用状态
`.selected`	选中状态
`.active`	激活状态

✨ 特效系统

html

<div class="effect-glass">毛玻璃效果</div>
<div class="effect-gradient-text">渐变文字</div>
<div class="effect-glow-border">发光边框</div>
<div class="effect-pulse-ring">脉冲环</div>

类名	说明
`.effect-glass`	毛玻璃效果
`.effect-gradient-text`	渐变文字
`.effect-glow-border`	发光边框
`.effect-pulse-ring`	脉冲环

工具动画类

html

<div class="util-anim-ripple">波纹效果</div>
<div class="util-anim-typewriter">打字机效果</div>

类名	说明
`.util-anim-ripple`	波纹效果
`.util-anim-typewriter`	打字机效果

🔗 与 WindiCSS 协同工作

协同机制

WindiCSS 处理基础工具类（p-*, m-*, text-*, bg-* 等）
MMS-SCSS 处理业务特定样式（flex-*, justify-*, items-* 等）
通过 WindiCSS 的 blocklist 避免命名冲突

WindiCSS 配置示例

// windi.config.ts
export default defineConfig({
  blocklist: [
    'lay-*',   // 布局类由 mms.scss 处理
    'sp-*',    // 间距类由 mms.scss 处理
    'font-*',  // 字体类由 mms.scss 处理
    'anim-*',  // 动画类由 mms.scss 处理
    'interact-*', // 交互类由 mms.scss 处理
    'resp-*',  // 响应式类由 mms.scss 处理
  ],
  shortcuts: {
    // 使用 windi- 前缀避免冲突
    'windi-flex-row': 'flex flex-row',
    'windi-flex-col': 'flex flex-col',
  }
})

💡 使用示例

基本布局示例

html

<!-- 水平居中布局 -->
<div class="flex-row items-center justify-center h-screen">
  <div class="bg-white rounded-lg shadow-lg p-8">
    <h1 class="font-2xl font-bold text-center mb-4">欢迎使用</h1>
    <p class="text-gray text-center">这是一个示例页面</p>
  </div>
</div>

响应式卡片布局

``html

卡片标题

卡片内容描述

卡片标题

卡片内容描述

卡片标题

卡片内容描述

```

表单示例

``html

```

加载状态示例

html

<!-- 旋转加载器 -->
<div class="flex-row items-center justify-center">
  <div class="loading-spinner mr-2"></div>
  <span>加载中...</span>
</div>

<!-- 骨架屏 -->
<div class="loading-skeleton h-20 rounded mb-4"></div>
<div class="loading-skeleton h-20 rounded mb-4"></div>
<div class="loading-skeleton h-20 rounded"></div>

📚 缩写别名

为了提高开发效率，MMS-SCSS 提供了常用的缩写别名：

缩写	对应类	说明
`.f-row`	`.flex-row`	水平排列
`.f-col`	`.flex-col`	垂直排列
`.y-center`	`.items-center`	垂直居中
`.x-end`	`.justify-end`	水平末尾对齐

html

<!-- 使用缩写 -->
<div class="f-row y-center x-end">
  <div>右对齐垂直居中内容</div>
</div>

🛠️ 优化建议

组合使用：合理组合多个类实现复杂布局
响应式设计：利用响应式类实现适配
性能优化：避免过度嵌套和冗余样式
语义化命名：使用语义化的类名提高可读性
一致性：保持项目中样式使用的一致性

📞 支持与反馈

如有问题或建议，请联系项目维护团队。

🎨 CSS变量定义

MMS-SCSS定义了一系列CSS变量，用于维护一致的设计系统：

变量名	默认值	说明
`--mms-color-white`	`#ffffff`	白色
`--mms-bg-main-color`	`#f8f8f8`	主背景色
`--mms-bg-color`	`#f5f5ff`	背景色
`--mms-border-color-light`	`#f1f2f3`	浅边框色
`--mms-color-primary-lighter`	`#ecf5ff`	主色浅色
`--mms-color-success-lighter`	`#f0f9eb`	成功色浅色
`--mms-color-warning-lighter`	`#fdf6ec`	警告色浅色
`--mms-color-danger-lighter`	`#fef0f0`	危险色浅色
`--mms-color-dark-hover`	`#0000001a`	深色悬停
`--mms-color-menu-hover`	`rgba(0, 0, 0, 0.2)`	菜单悬停
`--mms-color-user-hover`	`rgba(0, 0, 0, 0.04)`	用户悬停
`--mms-color-seting-main`	`#e9eef3`	设置主色
`--mms-color-seting-aside`	`#d3dce6`	设置侧边色
`--mms-color-seting-header`	`#b3c0d1`	设置头部色

🎬 动画关键帧

MMS-SCSS定义了丰富的动画关键帧，为元素提供各种动画效果：

关键帧名	说明
`fadeIn`	淡入效果
`fadeOut`	淡出效果
`slideUp`	上滑效果
`slideDown`	下滑效果
`slideLeft`	左滑效果
`slideRight`	右滑效果
`zoomIn`	放大效果
`zoomOut`	缩小效果
`bounce`	弹跳效果
`shake`	摇晃效果
`pulse`	脉冲效果
`spin`	旋转效果
`ping`	扩散效果
`pulseRing`	脉冲环效果
`skeleton`	骨架屏效果
`dots`	点状加载效果
`typewriter`	打字机效果
`blink`	闪烁效果

🔄 工具类别名

为了提高开发效率，MMS-SCSS 提供了常用的缩写别名：

缩写	对应类	说明
`.f-row`	`.flex-row`	水平排列
`.f-col`	`.flex-col`	垂直排列
`.y-center`	`.items-center`	垂直居中
`.x-end`	`.justify-end`	水平末尾对齐

html

<!-- 使用缩写 -->
<div class="f-row y-center x-end">
  <div>右对齐垂直居中内容</div>
</div>

🎨 MMS-SCSS 样式库使用文档 (优化版) ​

📋 目录 ​

🎯 设计理念 ​

协同工作原则 ​

统一标准 ​

📝 命名规范 ​

🎯 布局系统 ​

Flexbox 布局 ​

Flex 弹性比例 ​

对齐方式 ​

主轴对齐 (justify-*) ​

交叉轴对齐 (items-*) ​

常用布局模式 ​

定位系统 ​

溢出处理 ​

层级控制 (z-index) ​

清除浮动 ​

📏 尺寸系统 ​

宽度 (Width) ​

高度 (Height) ​

最大宽度/高度 ​

最小宽度/高度 ​

字体大小 ​

🔤 字体系统 ​

字体粗细 ​

文本转换 ​

文本溢出省略 ​

📐 间距系统 ​

外边距 (Margin) ​

内边距 (Padding) ​

间距组合 ​

🎨 颜色系统 ​

文字颜色 ​

背景颜色 ​

透明度 ​

✍️ 文本系统 ​

🖼️ 边框与圆角 ​

边框 ​

圆角 ​

shadowsystem ​

👁️ 显示系统 ​

🔧 工具类 ​

🎬 动画系统 ​

基础动画 ​

过渡效果 ​

📱 响应式系统 ​

断点系统 ​

响应式工具类 ​

Grid 网格系统 ​

容器类 ​

设备显示控制 ​

🖱️ 交互效果 ​

悬停效果 ​

按钮效果 ​

卡片效果 ​

⏳ 加载状态 ​

🚦 状态指示 ​

🎨 组件样式系统 ​

卡片样式 ​

按钮样式 ​

表单元素 ​

图标样式 ​

🔄 交互状态 ​

✨ 特效系统 ​

工具动画类 ​

🔗 与 WindiCSS 协同工作 ​

协同机制 ​

WindiCSS 配置示例 ​

💡 使用示例 ​

基本布局示例 ​

响应式卡片布局 ​

卡片标题

卡片标题

卡片标题

表单示例 ​

加载状态示例 ​

📚 缩写别名 ​

🛠️ 优化建议 ​

📞 支持与反馈 ​

🎨 CSS变量定义 ​

🎨 MMS-SCSS 样式库使用文档 (优化版)

📋 目录

🎯 设计理念

协同工作原则

统一标准

📝 命名规范

🎯 布局系统

Flexbox 布局

Flex 弹性比例

对齐方式

主轴对齐 (justify-*)

交叉轴对齐 (items-*)

常用布局模式

定位系统

溢出处理

层级控制 (z-index)

清除浮动

📏 尺寸系统

宽度 (Width)

高度 (Height)

最大宽度/高度

最小宽度/高度

字体大小

🔤 字体系统

字体粗细

文本转换

文本溢出省略

📐 间距系统

外边距 (Margin)

内边距 (Padding)

间距组合

🎨 颜色系统

文字颜色

背景颜色

透明度

✍️ 文本系统

🖼️ 边框与圆角

边框

圆角

shadowsystem

👁️ 显示系统

🔧 工具类

🎬 动画系统

基础动画

过渡效果

📱 响应式系统

断点系统

响应式工具类

Grid 网格系统

容器类

设备显示控制

🖱️ 交互效果

悬停效果

按钮效果

卡片效果

⏳ 加载状态

🚦 状态指示

🎨 组件样式系统

卡片样式

按钮样式

表单元素

图标样式

🔄 交互状态

✨ 特效系统

工具动画类

🔗 与 WindiCSS 协同工作

协同机制

WindiCSS 配置示例

💡 使用示例

基本布局示例

响应式卡片布局

表单示例

加载状态示例

📚 缩写别名

🛠️ 优化建议

📞 支持与反馈

🎨 CSS变量定义

🎬 动画关键帧

🔄 工具类别名