official_network/docs/LESS使用指南.md

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. 响应式混合

.mobile({
  // 移动端样式
});

.tablet({
  // 平板端样式
});

.desktop({
  // 桌面端样式
});

3. 设备检测混合

.touch-device({
  // 触摸设备样式
});

.high-dpi({
  // 高分辨率屏幕样式
});

.landscape({
  // 横屏模式样式
});

📝 使用方法

1. 引入变量文件

@import './variables.less';

2. 使用变量

.button {
  background-color: @primary-color;
  padding: @padding-md;
  border-radius: @border-radius-base;
  font-size: @font-size-base;
}

3. 嵌套结构

.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. 使用混合

.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. 颜色操作

.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. 构建命令

# 开发模式
yarn serve

# 生产构建
yarn build

📋 最佳实践

1. 变量命名

• 使用语义化名称
• 遵循 BEM 命名规范
• 保持命名一致性

2. 嵌套深度

• 避免超过 3 层嵌套
• 使用 & 符号引用父选择器
• 保持选择器简洁

3. 混合使用

• 创建可复用的混合
• 参数化常用样式
• 避免过度抽象

4. 文件组织

• 按功能模块组织文件
• 使用 @import 引入依赖
• 保持文件结构清晰

🚀 性能优化

1. 变量缓存

• 减少重复计算
• 使用预定义值
• 避免运行时计算

2. 选择器优化

• 避免过深嵌套
• 使用类选择器
• 减少选择器复杂度

3. 媒体查询优化

• 使用混合管理断点
• 避免重复的媒体查询
• 合并相似的样式规则

🔍 调试技巧

1. 浏览器开发工具

• 查看编译后的 CSS
• 检查选择器优先级
• 调试响应式样式

2. LESS 编译错误

• 检查语法错误
• 验证变量引用
• 确认文件路径

3. 样式冲突

• 使用 !important 谨慎
• 检查选择器特异性
• 验证样式继承

📚 学习资源

1. 官方文档

• LESS 官网
• LESS 语言特性
• LESS 函数参考

2. 在线工具

• LESS 在线编译器
• LESS 语法检查器

3. 社区资源

• LESS GitHub
• LESS 论坛

🎉 总结

通过使用 LESS，我们实现了：

1. 更好的代码组织：嵌套结构和模块化文件
2. 统一的样式管理：全局变量和混合系统
3. 高效的开发流程：快速修改和样式复用
4. 响应式设计：断点管理和设备适配
5. 维护性提升：清晰的代码结构和语义化命名

LESS 为项目提供了强大的样式管理能力，让开发更加高效，维护更加简单。