Less #

什么是 Less？ #

Less（Leaner Style Sheets）是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

文档结构 #

本指南按以下结构组织，循序渐进地帮助你掌握 Less：

1. 入门基础 #

主题	描述	文档链接
Less 简介	Less 的定义、特点、安装与基本使用	intro.md
变量	变量的定义、使用和作用域	variables.md

2. 核心特性 #

主题	描述	文档链接
嵌套	选择器嵌套、父选择器引用	nesting.md
混合	Mixin 的定义、参数、默认值	mixins.md

3. 进阶功能 #

主题	描述	文档链接
内置函数	颜色、数学、字符串等内置函数	functions.md
运算	算术运算、单位转换	operations.md

4. 高级特性 #

主题	描述	文档链接
导入	@import 导入规则和模块化	import.md
继承	@extend 继承语法和应用场景	extend.md

5. 专家级特性 #

主题	描述	文档链接
循环	递归 Mixin 实现循环	loops.md
映射	Maps 数据结构的使用	maps.md
插件	Less 插件系统与自定义函数	plugins.md

6. 最佳实践 #

主题	描述	文档链接
最佳实践	代码组织、性能优化、项目结构	best-practices.md

学习路径 #

入门阶段（Less 新手） #

了解 Less 的基本概念和优势
安装 Less 编译环境
掌握变量的定义和使用
学习嵌套语法
编写第一个 Less 文件

进阶阶段（Less 熟练） #

深入学习 Mixin 的各种用法
掌握内置函数的使用
学习运算和单位处理
理解作用域和变量提升
组织模块化的 Less 代码

高级阶段（Less 专家） #

掌握 @extend 继承机制
学习递归 Mixin 和循环
使用 Maps 管理复杂数据
理解 Less 编译原理
配置和优化编译流程

大师阶段（Less 大师） #

开发自定义 Less 插件
构建可复用的 Less 库
设计大型项目的样式架构
性能优化和最佳实践
参与开源社区贡献

Less vs CSS vs Sass #

特性	Less	CSS	Sass
变量	✅	✅ (CSS变量)	✅
嵌套	✅	❌	✅
Mixin	✅	❌	✅
函数	✅	✅ (有限)	✅
继承	✅	❌	✅
循环	✅ (递归)	❌	✅
学习曲线	低	最低	中
编译方式	JS/Node	无需编译	Ruby/Node

快速开始 #

less

// 定义变量
@primary-color: #4d926f;
@base-font-size: 16px;

// 使用变量和嵌套
.header {
  color: @primary-color;
  font-size: @base-font-size;
  
  .nav {
    display: flex;
    
    a {
      color: @primary-color;
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

编译后的 CSS：

css

.header {
  color: #4d926f;
  font-size: 16px;
}
.header .nav {
  display: flex;
}
.header .nav a {
  color: #4d926f;
  text-decoration: none;
}
.header .nav a:hover {
  text-decoration: underline;
}

资源推荐 #

Less 官方文档：最权威的 Less 文档
Less GitHub：Less 源码和问题反馈
Less 中文网：Less 中文文档
Less Playground：在线 Less 编辑器

贡献指南 #

欢迎对本指南进行贡献！如果你发现错误或有改进建议，请联系我们。

更新日志 #

2026-03-28：创建初始版本，包含完整的 Less 学习大纲

继续探索本指南，逐步掌握 Less 技术，从新手成长为 Less 专家！