CSS與LESS互轉

把 LESS 編譯成瀏覽器可用的 CSS

LESS 是延伸 CSS 語法的樣式表語言，適合用變數、混入與巢狀規則整理樣式。瀏覽器通常使用 CSS，因此在檢視編譯後的樣式、分享單一片段或準備測試輸出時，可以貼上 LESS 並產生 CSS。這個頁面的主要用途是 LESS → CSS：輸入 LESS 原始碼，輸出展開後的 CSS 文字。

編譯時，LESS 變數（例如 @primary）會於引用位置以其值替代；巢狀選擇器會組合成一般 CSS 選擇器；混入則會把對應的樣式宣告展開到呼叫位置。這些處理會將編譯期語法轉成樣式規則，但不會保留可供反向還原的完整原始結構。Less.js 官方文件說明 LESS 是 CSS 的向下相容擴充，並記載上述語法特性。閱讀 Less.js 入門文件與功能語法說明。

範例：@primary: #1890ff; 在 background: @primary; 中使用後，輸出會包含 background: #1890ff;；巢狀的 &:hover 會展開成像 .button:hover 的選擇器。產生 CSS 後，請以選擇器、屬性值和規則順序理解結果，而不是期待與 LESS 原始碼逐行相同。

貼上程式碼並取得編譯結果

1. 準備 LESS 輸入

   在輸入區貼上要編譯的 LESS 片段。若不熟悉輸入格式，可先載入範例，再依自己的變數、規則和選擇器修改。請確認片段包含編譯所需的變數與混入定義。

2. 執行 LESS → CSS

   確認方向是 LESS 轉 CSS，按下轉換按鈕。成功時，輸出區會顯示 CSS 文字；若轉換失敗，先檢查大括號、分號、變數名稱和混入呼叫等語法，再縮小輸入範圍找出錯誤位置。

3. 複製並回到使用情境核對

   使用輸出區的複製按鈕取得 CSS。將結果放入測試頁面或專案中，確認實際套用後的外觀、規則順序與資源路徑；編譯成功只代表產生了輸出，不代表樣式在目標頁面一定符合預期。

用一段短例子檢查變數與巢狀選擇器

例如輸入 @primary: #1890ff;，並在 .button 規則中使用 background: @primary;，編譯結果會把變數值寫入 CSS。若按鈕狀態寫成 &:hover，輸出則會形成完整的懸停選擇器。這類對照可用來確認值替換與巢狀展開是否符合原本意圖；若顏色或狀態選擇器有差異，回頭檢查變數定義、父選擇器位置與規則順序。

頁面也提供 CSS → LESS 方向，但 CSS 本來就是 LESS 可接受的語法子集，該方向會直接沿用輸入的 CSS 文字，不會自動猜測變數、混入或巢狀關係。因此若你的目標是把既有 CSS 重構成有 LESS 抽象的程式碼，仍需依專案語意手動整理後再編譯檢查。

編譯行為與錯誤排查

將輸出用於專案前的檢查

這項工具適合編譯可輸入的 LESS 文字片段，沒有專案目錄供選取多個依賴檔，也不會代替完整建置流程。相對資源網址可能仰賴原始檔案位置，複製到新位置後應重新確認圖片、字型等資源是否仍能載入。

• 編譯成 CSS 後，變數名稱、混入邊界或巢狀組織等原始資訊可能無法從輸出還原。
• 請在實際頁面檢查選擇器優先順序、媒體條件、覆寫規則和視覺結果；語法可編譯不等於樣式效果正確。
• 若程式碼依賴外部匯入、專案自訂解析設定或額外外掛，單一文字片段的結果可能與完整專案建置不同。