Less 简介 #

什么是 Less？ #

Less（Leaner Style Sheets，精简样式表）是一门 CSS 预处理语言，由 Alexis Sellier 于 2009 年创建。它扩展了 CSS 语言，增加了变量、Mixin、函数、嵌套等特性，使 CSS 更易维护、更易扩展、更易组织。

核心特点 #

特点	说明
变量	定义可复用的值，统一管理颜色、尺寸等
嵌套	直观的嵌套语法，反映 HTML 结构
Mixin	可复用的样式块，支持参数传递
函数	丰富的内置函数，处理颜色、数学运算等
运算	支持算术运算，自动处理单位
导入	模块化管理样式文件

为什么使用 Less？ #

CSS 的痛点 #

传统 CSS 存在以下问题：

css

/* 重复的颜色值 */
.header { color: #4d926f; }
.nav a { color: #4d926f; }
.button { background: #4d926f; }

/* 冗长的选择器 */
.header .nav .list .item .link { ... }

/* 无法复用样式块 */
.button-primary {
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
}
.button-secondary {
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
}

Less 的解决方案 #

less

// 变量解决重复问题
@primary-color: #4d926f;

.header { color: @primary-color; }
.nav a { color: @primary-color; }
.button { background: @primary-color; }

// 嵌套解决选择器冗长问题
.header {
  .nav {
    .list {
      .item {
        .link { ... }
      }
    }
  }
}

// Mixin 解决样式复用问题
.button-base() {
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
}

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

.button-secondary {
  .button-base();
  background: #ccc;
}

Less 的历史 #

text

2009年 ─── Alexis Sellier 创建 Less
    │
    │      最初使用 Ruby 编写
    │
2010年 ─── Twitter Bootstrap 采用 Less
    │
    │      推动了 Less 的普及
    │
2012年 ─── Less.js 发布
    │
    │      使用 JavaScript 重写
    │      可运行在 Node.js 和浏览器
    │
至今   ─── 广泛应用于各类项目

安装 Less #

方式一：npm 安装（推荐） #

bash

# 全局安装
npm install -g less

# 验证安装
lessc --version

# 编译 Less 文件
lessc styles.less styles.css

# 压缩输出
lessc styles.less styles.css --clean-css

方式二：项目本地安装 #

bash

# 安装到项目
npm install less --save-dev

# 使用 npx 编译
npx lessc styles.less styles.css

方式三：CDN 引入（浏览器端） #

html

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4"></script>

⚠️ 注意：浏览器端编译仅适用于开发环境，生产环境建议预编译。

方式四：构建工具集成 #

bash

# Webpack
npm install less less-loader --save-dev

# Vite（内置支持）
# 直接使用 .less 文件即可

# Gulp
npm install gulp-less --save-dev

基本使用 #

创建 Less 文件 #

创建 styles.less 文件：

less

// 定义变量
@primary-color: #4d926f;
@base-padding: 20px;

// 定义 Mixin
.center-flex() {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 样式规则
.container {
  padding: @base-padding;
  
  .header {
    color: @primary-color;
    
    .nav {
      .center-flex();
      
      a {
        color: @primary-color;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

编译 Less 文件 #

bash

# 基本编译
lessc styles.less styles.css

# 压缩输出
lessc styles.less styles.css --clean-css

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

# 监听文件变化
lessc --watch styles.less styles.css

编译结果 #

css

.container {
  padding: 20px;
}
.container .header {
  color: #4d926f;
}
.container .header .nav {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .header .nav a {
  color: #4d926f;
  text-decoration: none;
}
.container .header .nav a:hover {
  text-decoration: underline;
}

Less 文件扩展名 #

Less 文件通常使用以下扩展名：

扩展名	说明
`.less`	标准扩展名，最常用
`.less`	与 CSS 区分明确

Less 与其他预处理器对比 #

Less vs Sass #

特性	Less	Sass
语法	类 CSS	SCSS/缩进语法
变量符号	`@`	`$`
编译方式	JavaScript	Ruby/Dart
循环	递归 Mixin	@for/@each/@while
条件	守卫	@if/@else
学习曲线	较低	中等
生态系统	中等	丰富

Less vs Stylus #

特性	Less	Stylus
语法	类 CSS	灵活（可省略符号）
变量符号	`@`	可自定义
学习曲线	较低	中等
社区活跃度	高	中

开发工具支持 #

VS Code 插件 #

Easy LESS：保存自动编译
Less IntelliSense：智能提示
CSS Peek：跳转到定义

在线编辑器 #

命令行选项 #

bash

lessc [options] <source> [destination]

常用选项：
  --help              显示帮助信息
  --version           显示版本号
  --source-map        生成 source map
  --source-map-less-inline  内联 Less 代码到 source map
  --clean-css         压缩 CSS 输出
  --autoprefixer      添加浏览器前缀
  --watch             监听文件变化
  --strict-math=on    严格数学模式
  --strict-units=on   严格单位模式

下一步 #

现在你已经了解了 Less 的基本概念，接下来学习变量开始实际编写！