1

2025-08-25 15:57:54 +08:00
parent 1ad48b234c
commit 3ed48736b6
19 changed files with 4233 additions and 2097 deletions
--- a/docs/LESS使用指南.md
+++ b/docs/LESS使用指南.md
@@ -0,0 +1,312 @@
+# LESS 使用指南
+
+## 概述
+
+本项目已全面从 CSS 转换为 LESS，使用 LESS 的嵌套结构、变量、混合等特性来提高代码的可维护性和复用性。
+
+## 🎯 LESS 的优势
+
+### 1. **嵌套结构**
+- 更清晰的代码层次结构
+- 减少选择器重复
+- 提高代码可读性
+
+### 2. **变量系统**
+- 统一的颜色、字体、间距管理
+- 快速修改全局样式
+- 减少重复值
+
+### 3. **混合（Mixins）**
+- 可复用的样式块
+- 参数化样式
+- 减少代码重复
+
+### 4. **函数和运算**
+- 动态计算尺寸
+- 颜色混合和透明度
+- 响应式断点管理
+
+## 📁 文件结构
+
+```
+src/assets/css/
+├── variables.less          # 全局变量定义
+├── common.less            # 通用样式
+├── animations.less        # 动画效果
+├── mobile_responsive.less # 移动端响应式
+└── common_mobile.less     # 通用移动端适配
+```
+
+## 🔧 已配置的 LESS 功能
+
+### 1. **全局变量**
+- 颜色系统（主色、成功、警告、错误等）
+- 字体系统（大小、行高、字重）
+- 间距系统（内边距、外边距）
+- 断点系统（移动端、平板、桌面）
+- 动画系统（时长、缓动、延迟）
+
+### 2. **响应式混合**
+```less
+.mobile({
+  // 移动端样式
+});
+
+.tablet({
+  // 平板端样式
+});
+
+.desktop({
+  // 桌面端样式
+});
+```
+
+### 3. **设备检测混合**
+```less
+.touch-device({
+  // 触摸设备样式
+});
+
+.high-dpi({
+  // 高分辨率屏幕样式
+});
+
+.landscape({
+  // 横屏模式样式
+});
+```
+
+## 📝 使用方法
+
+### 1. **引入变量文件**
+```less
+@import './variables.less';
+```
+
+### 2. **使用变量**
+```less
+.button {
+  background-color: @primary-color;
+  padding: @padding-md;
+  border-radius: @border-radius-base;
+  font-size: @font-size-base;
+}
+```
+
+### 3. **嵌套结构**
+```less
+.card {
+  padding: @card-padding-base;
+  border: @border-width-base solid @border-color;
+  
+  .card-header {
+    padding: @padding-md;
+    border-bottom: @border-width-base solid @border-color-light;
+    
+    .card-title {
+      font-size: @font-size-h4;
+      color: @heading-color;
+      margin: 0;
+    }
+  }
+  
+  .card-body {
+    padding: @padding-md;
+    
+    .card-text {
+      color: @text-color;
+      line-height: @line-height-base;
+    }
+  }
+}
+```
+
+### 4. **使用混合**
+```less
+.responsive-button {
+  .mobile({
+    width: 100%;
+    padding: @padding-sm;
+    font-size: @font-size-sm;
+  });
+  
+  .tablet({
+    width: auto;
+    padding: @padding-md;
+    font-size: @font-size-base;
+  });
+  
+  .desktop({
+    padding: @padding-lg;
+    font-size: @font-size-lg;
+  });
+}
+```
+
+### 5. **颜色操作**
+```less
+.button {
+  background-color: @primary-color;
+  
+  &:hover {
+    background-color: lighten(@primary-color, 10%);
+  }
+  
+  &:active {
+    background-color: darken(@primary-color, 10%);
+  }
+  
+  &.disabled {
+    background-color: fade(@primary-color, 50%);
+  }
+}
+```
+
+## 🎨 颜色系统
+
+### 主色调
+- `@primary-color`: #3498db
+- `@primary-light`: #5dade2
+- `@primary-dark`: #2980b9
+- `@primary-lighter`: #ebf3fd
+
+### 功能色
+- `@success-color`: #52c41a
+- `@warning-color`: #faad14
+- `@error-color`: #f5222d
+- `@info-color`: #1890ff
+
+### 中性色
+- `@white`: #ffffff
+- `@black`: #000000
+- `@gray-1` 到 `@gray-10`: 从浅到深的灰色
+
+## 📱 响应式断点
+
+### 断点变量
+- `@screen-xs`: 480px
+- `@screen-sm`: 576px
+- `@screen-md`: 768px
+- `@screen-lg`: 992px
+- `@screen-xl`: 1200px
+- `@screen-xxl`: 1600px
+
+### 设备断点
+- `@mobile-breakpoint`: 768px
+- `@tablet-breakpoint`: 992px
+- `@desktop-breakpoint`: 1200px
+
+## 🔄 动画系统
+
+### 动画时长
+- `@animation-duration-base`: 0.2s
+- `@animation-duration-fast`: 0.1s
+- `@animation-duration-slow`: 0.3s
+- `@animation-duration-slower`: 0.5s
+
+### 动画缓动
+- `@animation-timing-base`: ease
+- `@animation-timing-ease-in`: ease-in
+- `@animation-timing-ease-out`: ease-out
+- `@animation-timing-ease-in-out`: ease-in-out
+- `@animation-timing-linear`: linear
+
+## 🛠️ 开发工具
+
+### 1. **Vue CLI 配置**
+项目已配置 LESS 支持，包括：
+- LESS 编译器
+- 全局变量注入
+- 自动前缀处理
+
+### 2. **构建命令**
+```bash
+# 开发模式
+yarn serve
+
+# 生产构建
+yarn build
+```
+
+## 📋 最佳实践
+
+### 1. **变量命名**
+- 使用语义化名称
+- 遵循 BEM 命名规范
+- 保持命名一致性
+
+### 2. **嵌套深度**
+- 避免超过 3 层嵌套
+- 使用 `&` 符号引用父选择器
+- 保持选择器简洁
+
+### 3. **混合使用**
+- 创建可复用的混合
+- 参数化常用样式
+- 避免过度抽象
+
+### 4. **文件组织**
+- 按功能模块组织文件
+- 使用 `@import` 引入依赖
+- 保持文件结构清晰
+
+## 🚀 性能优化
+
+### 1. **变量缓存**
+- 减少重复计算
+- 使用预定义值
+- 避免运行时计算
+
+### 2. **选择器优化**
+- 避免过深嵌套
+- 使用类选择器
+- 减少选择器复杂度
+
+### 3. **媒体查询优化**
+- 使用混合管理断点
+- 避免重复的媒体查询
+- 合并相似的样式规则
+
+## 🔍 调试技巧
+
+### 1. **浏览器开发工具**
+- 查看编译后的 CSS
+- 检查选择器优先级
+- 调试响应式样式
+
+### 2. **LESS 编译错误**
+- 检查语法错误
+- 验证变量引用
+- 确认文件路径
+
+### 3. **样式冲突**
+- 使用 `!important` 谨慎
+- 检查选择器特异性
+- 验证样式继承
+
+## 📚 学习资源
+
+### 1. **官方文档**
+- [LESS 官网](http://lesscss.org/)
+- [LESS 语言特性](http://lesscss.org/features/)
+- [LESS 函数参考](http://lesscss.org/functions/)
+
+### 2. **在线工具**
+- [LESS 在线编译器](http://lesscss.org/less-preview/)
+- [LESS 语法检查器](https://github.com/less/less.js)
+
+### 3. **社区资源**
+- [LESS GitHub](https://github.com/less/less.js)
+- [LESS 论坛](https://github.com/less/less.js/discussions)
+
+## 🎉 总结
+
+通过使用 LESS，我们实现了：
+
+1. **更好的代码组织**：嵌套结构和模块化文件
+2. **统一的样式管理**：全局变量和混合系统
+3. **高效的开发流程**：快速修改和样式复用
+4. **响应式设计**：断点管理和设备适配
+5. **维护性提升**：清晰的代码结构和语义化命名
+
+LESS 为项目提供了强大的样式管理能力，让开发更加高效，维护更加简单。