Less轉CSS編譯器

← ToolBox / IT開發 / Less轉CSS編譯器

💻 Less Compiler

📐 工作原理與說明
把 Less 編譯為標準 CSS。
  • 特性：變數 @var、巢狀規則、混合（mixin）、運算與內建函式。
  • 編譯：變數求值、mixin 內聯展開、巢狀選擇器展開為後代選擇器。
  • & 符號：代表父選擇器，用於偽類與拼接（如 &:hover）。
  • 注意：過度巢狀會生成過長的選擇器鏈，導致優先順序過高難以覆蓋。

Compile Less to CSS in your browser — turn variables and mixins into plain stylesheets.

編譯結果將顯示在此處...
❌ 編譯錯誤

📖 使用說明

功能說明

  • 即時編譯：輸入 Less 程式碼時自動延遲編譯，無需手動點選
  • 變數 Variables：@width: 10px; 定義變數，可在全域性複用
  • 混合 Mixins：.bordered(); 引用一組屬性集合
  • 巢狀 Nesting：支援選擇器層級巢狀，結構更清晰
  • 運算 Operations：支援加減乘除等數學運算
  • 函式 Functions：darken()、lighten()、fade() 等顏色與數學函式

編譯選項

  • 壓縮模式：移除註釋和多餘空白，輸出最小體積 CSS
  • 嚴格數學：僅在括號內執行數學運算，避免 font: 12px/1.5 被計算
  • 嚴格單位：單位不一致時報錯，而非自動轉換
  • Tab 縮排：輸入框中按 Tab 鍵可插入兩個空格縮排

📚 深度解析：Less 轉 CSS 編譯器

💡 常見使用場景

  • 把 Less 變數/巢狀編譯為標準 CSS。
  • 維護老專案時把 Less 編譯成 CSS 核對產物：確認巢狀展開後的選擇器層級與變數替換結果符合預期。
編譯
`@c:red; .a{color:@c; .b{font:12px}}` → `.a{color:red}.a .b{font:12px}`。

❓ 常見問題（FAQ）

Less 變數與 CSS 變數區別？
Less 編譯期替換，CSS 變數執行時生效。
變數沒替換是什麼原因？
Less 變數是編譯期替換，作用域遵循「就近優先、延遲求值」：變數可在定義之後被修改，最終取最後一次賦值，因此寫在使用之後也會生效，這點與直覺不同。另外 @import 順序、變數插值（@{name}）與轉義（~"..."）都會影響替換結果。
⚠️ 使用說明與注意事項

🔗 相關工具

📄 .properties 解析器 - 免費開發工具，properties 解析器 | ToolBox免費線上工具箱.properties 解析器 💻 AST抽象語法樹檢視器 - 線上解析JavaScript程式碼生成AST樹形結構，支援節點 | ToolBox免費線上工具箱AST 抽象語法樹檢視器 🧹 CSS 壓縮/美化工具 - 免費開發工具，CSS 壓縮/格式化/美化 | ToolBox免費線上工具箱CSS 壓縮/格式化/美化 🏋️ CSS 格式化 - 免費開發工具，線上CSS 格式化 | ToolBox免費線上工具箱CSS 格式化 ✨ Cron 表示式生成器 - 免費開發工具，線上Cron 表示式生成器 | ToolBox免費線上工具箱⏰ Cron 表示式生成器 🏋️ GraphQL 格式化 - 免費開發工具，線上GraphQL 格式化 | ToolBox免費線上工具箱◈ GraphQL 格式化
📖關於「Less 轉 CSS 編譯器」 ▼

📝工具簡介

Less 轉 CSS 編譯器是一款線上工具，可將 Less 前處理器程式碼即時編譯為瀏覽器可識別的標準 CSS。基於 less.js 引擎，支援變數、混合、巢狀、運算、函式等 Less 全部核心特性。所有編譯均在瀏覽器本地完成，程式碼不離開你的裝置。

✨功能特點

🎯使用場景