Less 1开始

常用链接

【文档】
less 中文文档
less 英文文档

【工具】
less 在线编译工具

运行环境‌

【默认】浏览器是不识别 less 文件的。

Less.js 实时编译

可在客户端通过引入 LESS.js 实时编译‌，

<!-- 直接在浏览器中使用 -->
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

nodejs 手动编译

也可在服务端通过 Node.js 进行预编译生成标准 CSS‌；

npm install -g less
lessc style.less styles.css

vscode 插件实时编译

【缺点】插件会编译所有当前项目保存的 less 文件。

脚手架中

例如：webpack 中借助各种包编译。（原理也是 nodejs 中编译 less）

概述

【是什么？】Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。

【语言定位‌】
作为 CSS 的超集，LESS 在兼容标准 CSS 语法的基础上，通过引入变量、混合（Mixin）、嵌套规则、函数等编程特性，提升样式的可维护性和扩展性‌。

【核心功能‌】

‌变量‌：允许定义可复用的值（如颜色、尺寸），便于全局修改‌。
‌混合（Mixin）‌：支持将一组 CSS 属性打包复用，减少代码冗余‌。
‌嵌套语法‌：通过层级结构直观描述元素关系，简化复杂选择器的编写‌。
‌运算与函数‌：支持数学运算和内置函数，动态生成样式值‌。

【应用场景】
适用于大型项目或主题定制场景，通过模块化特性提升开发效率，降低维护成本‌。
其设计目标是通过增强 CSS 的动态能力，帮助开发者更高效地管理样式代码‌。