Less.js

Less(全称 Leaner Style Sheets)是 CSS 的一个向后兼容的语言扩展。

LessLeaner Style SheetsCSS样式库
1 更新于 2026-03-20 09:06

声明:文档由AI生成,仅作参考,最终功能和计费标准以官方为准。

一、产品概述

Less(全称 Leaner Style Sheets)是由Alexis Sellier于2009年研发,后由核心贡献团队维护的JavaScript工具,是CSS的向后兼容式语言扩展Less的配套解析工具,核心功能为将Less样式代码转换为标准CSS样式代码,让开发者可通过Less的便捷语法提升CSS开发效率。

由于 Less 的外观与 CSS 非常相似,因此学习起来非常容易。Less 只在 CSS 语言的基础上进行了一些便捷的扩展,这也是它易于学习的原因之一。

ScreenShot_2026-03-20_090346_437.png

二、产品特色

  1. 具备变量功能,可定义样式变量并进行运算,实现样式属性的统一管理与动态计算
  2. 支持混合(Mixins)特性,能将一个规则集的属性引入到另一个规则集,实现样式代码的复用
  3. 提供嵌套语法,可模拟HTML结构进行CSS规则嵌套编写,让代码结构更简洁且层级清晰
  4. 支持嵌套At规则与冒泡特性,@media、@supports等At规则可嵌套编写并按规则生成标准CSS
  5. 实现算术运算能力,可对数字、颜色、变量执行+、-、*、/运算,且能对部分单位进行自动转换
  6. 拥有转义功能,可将任意字符串作为属性或变量值,3.5版本后简化了转义的使用方式
  7. 内置丰富函数,支持颜色转换、字符串处理、数值计算等各类样式相关的函数操作
  8. 提供命名空间与访问器特性,可对混合和变量进行分组封装,便于代码组织与复用
  9. 3.5版本起支持映射功能,可将混合和规则集作为值的映射表进行取值使用
  10. 拥有与CSS相似的作用域规则,变量和混合先从本地查找,未找到则继承父作用域,且支持延迟加载
  11. 同时支持块式注释和行内注释两种注释方式,满足不同的注释编写需求
  12. 支持文件导入,可导入Less文件并复用其中的变量和样式,也可直接导入CSS文件
  13. 提供多种使用方式,可通过npm全局安装使用命令行编译,也可在浏览器中通过CDN引入直接解析,还提供在线调试环境
  14. 完全向后兼容CSS,开发者可在Less中直接编写标准CSS代码,学习成本低

三、收费标准

Less.js基于Apache 2协议开源发布,全功能免费提供,可自由下载、使用于个人、企业内部及商业场景,也可将其集成到自研的包或分发产品中,无任何付费模块、会员及增值服务。

四、常见问题

Q:Less和CSS的关系是什么?

A:Less是CSS的向后兼容式语言扩展,在CSS基础上增加了便捷的语法特性,Less.js可将Less代码转换为标准CSS代码,Less中可直接编写纯CSS代码,保证了与现有CSS生态的兼容。

Q:Less的除法运算在4.0版本后有什么变化?

A:从Less 4.0版本开始,/运算符在括号外不再执行除法运算,仅作为普通符号处理,如需执行除法运算,需要将运算内容放置在括号内,也可修改Math设置改变该规则,但官方不推荐此操作。

Q:Less中的calc()函数有什么特殊处理?

A:为保证CSS兼容性,Less对calc()函数不直接解析其中的数学表达式,但会解析嵌套在其中的变量和数学运算,最终生成包含原calc()结构的CSS代码。

Q:如何避免Less的命名空间出现在最终的CSS输出中?

A:在定义命名空间时,为其添加()后缀(如#bundle()),即可让该命名空间仅作为混合的分组使用,不会被编译到最终的CSS输出中。

Q:Less的作用域中,变量和混合的定义位置有要求吗?

A:Less的变量和混合定义支持延迟加载,无需将定义放置在引用之前,解析时会先查找本地作用域,再向上继承父作用域的定义。

Q:Less可以在哪些环境中使用?

A:Less可通过npm install -g less命令全局安装,使用lessc命令行工具编译Less文件;也可在浏览器中通过标签引入Less文件,并加载Less.js的CDN脚本进行前端解析;同时官方还提供了在线调试的playground环境。

Q:修改Less.js后进行分发,需要遵守哪些协议要求?

A:基于Apache 2协议,分发包含Less.js的产品时,需在分发内容中包含协议副本,并向Less核心团队进行明确的归属说明;无需包含Less.js的源码及修改后的源码,也无需将修改内容提交回Less.js项目(官方鼓励反馈修改)。

Q:Less 3.5版本后,转义功能的使用有什么简化?

A:3.5版本前需要使用~"内容"或~'内容'的方式进行转义,3.5版本后可直接将需要转义的内容写为变量值(如@min768: (min-width: 768px)),无需额外的转义符号,多数原需转义的场景均被简化。