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 預處理器的功能和優勢有了更深入的了解。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～