Less ( 安装、开始使用 )
Less 是 CSS 的一种预处理器，不仅撰写方式类似 CSS，更可以搭配对应的 JavaScript 使其运行在浏览器端，这篇教学会介绍如何安装 Less 以及开始使用 Less。
快速导览：
认识 Less
Less 是 CSS 的一种预处理器，Less 除了可以在后端运行，也可以搭配对应的 JavaScript 在网页执行，使得开发 CSS 更为便捷。Less 由 Alexis Sellier ( @cloudhead ) 于 2009 年创建，最初用 Ruby 语言撰写写，后来移植改用 JavaScript 撰写。Less 最初受到另外一套 CSS 预处理器 Sass 的启发，由于 Sass 当时和 CSS 原生语法差异较大，因此 Less 改良成为更符合 CSS 且更精简的语法，尔后 Sass 又受到 Less 的启发而创建类似 CSS 语法的 SCSS。
本机环境开发 Less 需要使用编辑程序码的工具，例如 VSCode、 Sublime Text 或笔记本等，存档时将副档名存为“
.less”就会变成 Less 的文件。
前往 Less 官网：https://lesscss.org/
后端安装 Less
通常开发者会在 Node.js 后端环境使用 Less，下方是 Less 官网所提供的安装方式 ( 参考 Less Installing )。
// 全域安裝 ( 在全系統範圍內安裝 )
npm install less -g
// 專案安裝 ( 安裝到專案中並添加到 devDependencies )
npm i less --save-dev
// 專案安裝 ( 安裝 beta 版本，可以指定版本號 )
npm install [email protected] -g
如果使用 gulp 开发，可先透过 npm 指令安装对应模组 ( gulp 和 gulp-less )，接着就能在 gulp 环境下使用 Less ( 参考 gulp-less )
npm install gulp gulp-less
前端执行 Less ( 浏览器执行 Less )
除了在后端环境执行 Less，也可以搭配 Less.js 直接在浏览器端将 Less 转换为 CSS，使用方式只需要在网页 <head> 区域放入下列两个文件，打开网页后就会将 styles.less 的内容转换成 CSS ( 参考 Less Browser Usage )。
除了测试之外，这种方式因为会产生额外的加载资源与转换时间，多少会影响到网页的 SEO，建议使用后端转换成 CSS 或撰写纯 CSS 执行效率较好。
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
测试 Less 的线上工具
许多主流的线上网页测试工具都支援 Less，下方会列出几套支援 Less 的线上工具：
JS Bin ( https://jsbin.com/ )
打开工具后，从 CSS 字段选择“Less”，就可以开始撰写 Less。
选择 Less 之后，页签标示也会变成 Less，下方图片呈现转换的效果。
CodePen ( https://codepen.io/pen/ )
打开工具后，点击 CSS 字段的齿轮图示打开设定画面，设定 CSS 预处理器为 Less。
选择 Less 之后，页签标示也会变成 Less，下方图片呈现转换的效果。
Poe.AI ( https://poe.com/ )
Poe.AI 是一套 AI 工具，可以透过提示问句的方式，将程序码提供给 AI，并请 AI 产生网页进行预览测试，下方范例使用的模型为“Gemini-2.0-Flash”，提示词如下 ( 注意程序码的部分使用“``”包覆，更多教学参考“开始使用 Poe ( Poe AI、Poe.com )”)：
請幫我用網頁顯示這段程式碼 ( 使用 Less 預處理器 )： HTML： `<h1>apple</h1> <h2>oxxo</h2> <div class="a"> hello <em>world</em> </div>` Less： `@color-1: red; @color-2: blue; @size-30px: 20px; h1 {color: @color-1;} h2 {color: @color-2;} .fn(){ em { font-size: @size-30px; color: gray; } } .a {.fn();} .b {.fn();}`送出提示词后，Poe.AI 就会产生相关执行效果，现在其实越来越多 AI 工具也都能做到类似的效果，如果有机会不妨尝试看看。
Less to CSS ( css-tools/less-to-css )
网络上有许多将 Less 转换成 CSS 的工具，只要将自己撰写的 Less 程序码贴上就能转换成标准的 CSS，同时也可以查看转过后的结果是否符合预期，建议可先贴入下方的程序码，如果和 Less 官网转换后的长相相同，就表示这个转换工具是可行的。
.p, .a, .ul, .li { color: blue; & + & { color: red; } }
小结
这篇教学介绍了 CSS 预处理器的基本概念及其优缺点，希望能让大家对这些 CSS 预处理器的功能和优势有了更深入的了解。
微信扫码关注
抖音扫码关注