Less功能介绍和完整使用示例

Less (Leaner Style Sheets) 是一门向后兼容的 CSS 预处理器扩展语言。它允许你使用变量、嵌套规则、Mixin（混入）、函数等编程特性来编写样式代码，最终编译成标准的 CSS 文件供浏览器解析。

以下是 Less 的核心功能介绍及一个完整的实战示例。

---

🚀 核心功能介绍

1. 变量

将重复使用的值（颜色、字体、尺寸）定义为变量，便于全局维护。

@primary-color: #4D926F;
@font-size-base: 14px;

.header {
  color: @primary-color;
  font-size: @font-size-base;
}

2. 嵌套规则

模仿 HTML 结构书写 CSS，减少重复选择器，层级关系一目了然。

.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    text-decoration: none;
    &:hover { color: @primary-color; } // & 代表父选择器 .nav a
  }
}

3. Mixin（混入）

将一组属性封装起来，在需要时"混入"到其他规则中，支持参数和默认值。

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.button {
  .border-radius(8px); // 调用并传参
  background: @primary-color;
}

4. 运算与函数

支持加减乘除、颜色函数、数学函数等。

@base-width: 960px;
.sidebar {
  width: @base-width / 3;       // 320px
  color: lighten(@primary-color, 20%); // 颜色变亮20%
}

5. 导入

将样式拆分为多个文件，通过 @import 组织管理。

@import "variables.less";
@import "mixins.less";
@import "components/button.less";

6. 条件判断与循环（高级）

Less 支持 Guard 条件和递归循环，可实现类似编程的逻辑控制。

.mixin(@color) when (lightness(@color) >= 50%) {
  background-color: black;
}
.mixin(@color) when (lightness(@color) < 50%) {
  background-color: white;
}

---

📝 完整使用示例：构建一个卡片组件

下面演示从项目搭建到最终输出的完整流程。

Step 1: 安装 Less

# 全局安装
npm install -g less

# 或作为项目依赖
npm install less --save-dev

Step 2: 创建 Less 文件

**variables.less** --- 全局变量

// variables.less
@color-primary: #3498db;
@color-text: #333333;
@color-bg: #f9f9f9;
@spacing-unit: 8px;
@border-radius: 8px;
@card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

**mixins.less** --- 可复用混入

// mixins.less
.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-padding(@multiplier: 2) {
  padding: @spacing-unit * @multiplier;
}

**card.less** --- 主样式文件

// card.less
@import "variables.less";
@import "mixins.less";

.card {
  background: @color-bg;
  border-radius: @border-radius;
  box-shadow: @card-shadow;
  .card-padding(3); // 24px
  max-width: 400px;
  margin: @spacing-unit * 4 auto;

  &__header {
    font-size: 18px;
    color: @color-primary;
    margin-bottom: @spacing-unit * 2;
    border-bottom: 1px solid darken(@color-bg, 10%);
    padding-bottom: @spacing-unit;
  }

  &__body {
    color: @color-text;
    line-height: 1.6;
    font-size: 14px;
  }

  &__footer {
    margin-top: @spacing-unit * 3;
    .flex-center();

    .btn {
      background: @color-primary;
      color: #fff;
      border: none;
      border-radius: @border-radius / 2;
      .card-padding(1.5);
      cursor: pointer;
      transition: background 0.3s ease;

      &:hover {
        background: darken(@color-primary, 15%);
      }
    }
  }
}

Step 3: 编译为 CSS

lessc card.less card.css

Step 4: 输出结果 (card.css)

.card {
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  max-width: 400px;
  margin: 32px auto;
}
.card__header {
  font-size: 18px;
  color: #3498db;
  margin-bottom: 16px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 8px;
}
.card__body {
  color: #333333;
  line-height: 1.6;
  font-size: 14px;
}
.card__footer {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card__footer .btn {
  background: #3498db;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 12px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.card__footer .btn:hover {
  background: #1a6fb5;
}

---

⚙️ 常用编译选项速查

命令	说明
lessc input.less output.css	基本编译
lessc -x input.less output.css	压缩输出（生产环境）
lessc --source-map input.less output.css	生成 Source Map（调试用）
lessc --watch input.less output.css	监听文件变化自动编译
lessc --include-path=src/less	指定 @import 搜索路径

💡 最佳实践建议

1. 命名规范 ：变量使用语义化命名（@color-danger 而非 @red），类名推荐 BEM 命名法配合 & 嵌套
2. 避免过度嵌套 ：建议不超过 3-4 层，过深会导致选择器优先级过高难以覆盖
3. 善用 Mixin 替代重复代码：但不要用 Mixin 模拟继承，保持输出 CSS 简洁
4. 生产环境务必压缩 ：使用 -x 或集成构建工具（Webpack/Vite）的压缩插件
5. 渐进迁移 ：Less 完全兼容标准 CSS，可以将现有 .css 直接改名为 .less 逐步重构

注意 ：Less 是编译时预处理，浏览器不直接识别 .less 文件。虽然提供了 less.js 浏览器端实时编译方案，但仅建议用于开发调试，生产环境必须预编译为 CSS。