Less 最佳实践 #

本指南总结了 Less 项目开发中的最佳实践，帮助你编写更清晰、更高效、更易维护的样式代码。

代码组织 #

文件结构 #

推荐的项目文件结构：

text

styles/
├── main.less              // 主入口文件
├── _variables.less        // 变量定义
├── _mixins.less           // Mixin 定义
├── _functions.less        // 自定义函数
├── _reset.less            // 重置样式
├── base/
│   ├── _typography.less   // 排版
│   ├── _forms.less        // 表单
│   └── _buttons.less      // 按钮
├── components/
│   ├── _card.less         // 卡片
│   ├── _modal.less        // 模态框
│   ├── _navbar.less       // 导航栏
│   └── _table.less        // 表格
├── layouts/
│   ├── _header.less       // 页头
│   ├── _footer.less       // 页脚
│   ├── _sidebar.less      // 侧边栏
│   └── _grid.less         // 栅格
├── pages/
│   ├── _home.less         // 首页
│   ├── _about.less        // 关于页
│   └── _contact.less      // 联系页
├── utilities/
│   ├── _spacing.less      // 间距
│   ├── _display.less      // 显示
│   ├── _text.less         // 文本
│   └── _colors.less       // 颜色
└── themes/
    ├── _light.less        // 浅色主题
    └── _dark.less         // 深色主题

导入顺序 #

less

// main.less

// 1. 配置（变量、函数、Mixin）
@import "_variables.less";
@import "_functions.less";
@import "_mixins.less";

// 2. 重置和基础样式
@import "_reset.less";
@import "base/_typography.less";
@import "base/_forms.less";
@import "base/_buttons.less";

// 3. 布局
@import "layouts/_grid.less";
@import "layouts/_header.less";
@import "layouts/_footer.less";
@import "layouts/_sidebar.less";

// 4. 组件
@import "components/_card.less";
@import "components/_modal.less";
@import "components/_navbar.less";
@import "components/_table.less";

// 5. 页面特定样式
@import "pages/_home.less";
@import "pages/_about.less";
@import "pages/_contact.less";

// 6. 工具类
@import "utilities/_spacing.less";
@import "utilities/_display.less";
@import "utilities/_text.less";
@import "utilities/_colors.less";

// 7. 主题
@import "themes/_light.less";

命名规范 #

变量命名 #

less

// 推荐：语义化命名
@color-primary: #007bff;
@color-secondary: #6c757d;
@font-size-base: 16px;
@spacing-md: 16px;
@border-radius-base: 4px;

// 不推荐：具体值命名
@blue: #007bff;
@gray: #6c757d;
@size-16: 16px;

命名约定 #

less

// BEM 命名 + Less 嵌套
.block {
  // Element
  &__element {
    // Modifier
    &--modifier {
      color: red;
    }
  }
}

// 编译结果：.block__element--modifier { color: red; }

文件命名 #

less

// 使用下划线前缀表示部分文件
_variables.less
_mixins.less
_components/_card.less

// 主文件不使用前缀
main.less
theme.less

变量管理 #

分组组织 #

less

// ==============================================
// 颜色系统
// ==============================================
@color-primary: #007bff;
@color-secondary: #6c757d;
@color-success: #28a745;
@color-danger: #dc3545;
@color-warning: #ffc107;
@color-info: #17a2b8;

// 文本颜色
@color-text-primary: #212529;
@color-text-secondary: #6c757d;
@color-text-muted: #adb5bd;

// 背景颜色
@color-bg-primary: #ffffff;
@color-bg-secondary: #f8f9fa;
@color-bg-dark: #343a40;

// ==============================================
// 字体系统
// ==============================================
@font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
@font-family-mono: "SFMono-Regular", Consolas, monospace;

@font-size-base: 16px;
@font-size-sm: 14px;
@font-size-lg: 18px;

@font-weight-normal: 400;
@font-weight-medium: 500;
@font-weight-bold: 700;

@line-height-base: 1.5;
@line-height-sm: 1.25;
@line-height-lg: 2;

// ==============================================
// 间距系统
// ==============================================
@spacing-unit: 8px;
@spacing-xs: @spacing-unit * 0.5;  // 4px
@spacing-sm: @spacing-unit;         // 8px
@spacing-md: @spacing-unit * 2;     // 16px
@spacing-lg: @spacing-unit * 3;     // 24px
@spacing-xl: @spacing-unit * 4;     // 32px

// ==============================================
// 断点
// ==============================================
@breakpoint-sm: 576px;
@breakpoint-md: 768px;
@breakpoint-lg: 992px;
@breakpoint-xl: 1200px;

使用映射组织 #

less

@theme: {
  colors: {
    primary: #007bff;
    secondary: #6c757d;
    success: #28a745;
    danger: #dc3545;
  };
  fonts: {
    base: 16px;
    small: 14px;
    large: 18px;
  };
  spacing: {
    sm: 8px;
    md: 16px;
    lg: 24px;
  };
};

.button {
  background: @theme[colors][primary];
  font-size: @theme[fonts][base];
  padding: @theme[spacing][md];
}

Mixin 设计 #

参数设计 #

less

// 推荐：合理的默认值
.button-variant(
  @background: #007bff,
  @color: contrast(@background),
  @border: darken(@background, 5%)
) {
  background: @background;
  color: @color;
  border: 1px solid @border;
}

// 不推荐：无默认值
.button-variant(@background, @color, @border) {
  background: @background;
  color: @color;
  border: 1px solid @border;
}

单一职责 #

less

// 推荐：每个 Mixin 做一件事
.clearfix() {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

.text-ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 不推荐：做多件事
.utility-mixins() {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
  overflow: hidden;
  text-overflow: ellipsis;
}

命名规范 #

less

// 推荐：动词或功能描述
.text-ellipsis() { }
.flex-center() { }
.gradient() { }
.border-radius() { }

// 不推荐：无意义命名
.mixin1() { }
.do-something() { }
.style() { }

嵌套控制 #

限制嵌套深度 #

less

// 推荐：最多 3 层
.component {
  .element {
    .sub-element {
      // 停止嵌套
    }
  }
}

// 不推荐：嵌套过深
.page {
  .header {
    .nav {
      .list {
        .item {
          .link {
            // 太深了！
          }
        }
      }
    }
  }
}

使用 & 简化选择器 #

less

// 推荐
.button {
  &-primary { }
  &-secondary { }
  &-large { }
}

// 不推荐
.button-primary { }
.button-secondary { }
.button-large { }

性能优化 #

使用 @extend 减少 CSS 大小 #

less

// 使用 @extend 合并选择器
.base-button {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
}

.btn-primary:extend(.base-button) {
  background: #007bff;
}

.btn-secondary:extend(.base-button) {
  background: #6c757d;
}

避免过度使用 Mixin #

less

// 不推荐：Mixin 生成大量重复代码
.generate-columns(12);  // 生成 12 个类

// 推荐：按需生成
.col-6 { width: 50%; }
.col-4 { width: 33.33%; }
.col-3 { width: 25%; }

使用 reference 导入 #

less

// 只导入需要的样式
@import (reference) "bootstrap.less";

.my-button:extend(.btn) { }

压缩输出 #

bash

# 使用 clean-css 压缩
lessc styles.less styles.css --clean-css

# 或使用插件
npm install less-plugin-clean-css --save-dev

响应式设计 #

移动优先 #

less

// 推荐：移动优先
.container {
  width: 100%;
  padding: 15px;
  
  @media (min-width: @breakpoint-md) {
    width: 750px;
  }
  
  @media (min-width: @breakpoint-lg) {
    width: 970px;
  }
}

// 不推荐：桌面优先
.container {
  width: 970px;
  
  @media (max-width: @breakpoint-lg) {
    width: 750px;
  }
  
  @media (max-width: @breakpoint-md) {
    width: 100%;
  }
}

响应式 Mixin #

less

@breakpoints: {
  sm: 576px;
  md: 768px;
  lg: 992px;
  xl: 1200px;
};

.respond-to(@breakpoint, @rules) {
  @media (min-width: @breakpoints[@breakpoint]) {
    @rules();
  }
}

.container {
  width: 100%;
  
  .respond-to(md, {
    width: 750px;
  });
  
  .respond-to(lg, {
    width: 970px;
  });
}

主题化 #

主题变量 #

less

// _variables.less
@themes: {
  light: {
    bg: #ffffff;
    text: #333333;
    primary: #007bff;
  };
  dark: {
    bg: #1a1a1a;
    text: #ffffff;
    primary: #4da3ff;
  };
};

// 使用
@current-theme: light;

body {
  background: @themes[@current-theme][bg];
  color: @themes[@current-theme][text];
}

CSS 变量结合 #

less

@primary: #007bff;

:root {
  --color-primary: @primary;
}

.button {
  background: @primary;
  background: var(--color-primary, @primary);
}

调试技巧 #

使用 @debug #

Less 没有 @debug，但可以用属性输出调试：

less

.debug(@value) {
  _debug: @value;
}

.box {
  .debug(@primary-color);
}

Source Map #

bash

# 生成 source map
lessc styles.less styles.css --source-map

# 内联 source map
lessc styles.less styles.css --source-map=inline

工具配置 #

VS Code 配置 #

json

// settings.json
{
  "less.compile": {
    "compress": true,
    "sourceMap": true,
    "out": "${workspaceFolder}/css/"
  }
}

ESLint 配置 #

json

// .eslintrc.json
{
  "plugins": ["less"],
  "rules": {
    "less/selector-nested-pattern": "warn"
  }
}

Prettier 配置 #

json

// .prettierrc
{
  "less.enable": true,
  "less.singleQuote": true
}

检查清单 #

代码质量 #

[ ] 变量使用语义化命名
[ ] Mixin 有合理的默认参数
[ ] 嵌套深度不超过 3 层
[ ] 使用注释分隔代码块
[ ] 避免魔法数字

性能 #

[ ] 使用 @extend 减少重复
[ ] 使用 reference 导入
[ ] 压缩 CSS 输出
[ ] 生成 source map

可维护性 #

[ ] 文件结构清晰
[ ] 导入顺序合理
[ ] 变量集中管理
[ ] Mixin 单一职责

兼容性 #

[ ] 添加浏览器前缀
[ ] 测试响应式布局
[ ] 验证主题切换

总结 #

遵循这些最佳实践，可以帮助你：

提高代码质量：清晰的命名和组织结构
提升开发效率：复用 Mixin 和变量
优化性能：减少 CSS 大小
增强可维护性：模块化和文档化
团队协作：统一的代码规范

继续探索 Less 的世界，不断实践和优化你的样式代码！