CSS 工具
一站式 CSS 工具箱：格式化/美化、壓縮/精簡、語法校驗、把 SCSS/Sass 與 LESS 編譯為 CSS，以及把 CSS 反向轉換回 SCSS 或 LESS。
全部處理都在你的瀏覽器本地完成 —— 你的資料絕不會上傳到任何伺服器。
|
模式：
|
|
使用方法：把你的 CSS/SCSS/LESS/SASS 貼上到左側文本框，選擇一種模式，然後點選處理（也可以直接輸入 —— 輸入時會自動處理）。
每種模式的工作方式
CSS 格式化：以統一的縮排（2 個空格、4 個空格或製表符）整理 CSS，每條宣告佔一行。能正確處理 @media、@keyframes、@supports 這類巢狀 at 規則。保留註釋（/* */ 與單行註釋皆可）。切換縮排下拉框即可在 2 空格、4 空格和製表符之間切換。
壓縮：移除所有多餘的空白、註釋和冗餘字元，得到體積最小的 CSS。非常適合部署到生產環境以減小檔案體積和頻寬佔用。檢視統計欄可以看到壓縮比例。
校驗：解析 CSS 並檢查語法錯誤，報告錯誤時給出精確的行號與列號。同時顯示統計資訊：規則數、選擇器數、宣告數和 at 規則數。
SCSS 格式化：以統一的縮排重新整理 SCSS/Sass 樣式表。支援全部 SCSS 專有語法：$variables、@mixin/@include、@extend、@if/@for/@each 控制流、#{$var} 插值，以及 // 單行註釋。保留巢狀選擇器結構並正確縮排巢狀塊。切換縮排下拉框即可切換縮排方式。
LESS 格式化：以統一的縮排重新整理 LESS 樣式表。支援全部 LESS 專有語法：@variables、引數化混入、守衛（when）、@{var} 插值、屬性合併，以及 // 單行註釋。保留巢狀選擇器結構並正確縮排巢狀塊。切換縮排下拉框即可切換縮排方式。
SCSS → CSS：使用官方 Dart Sass 編譯器（v1.102）把 SCSS/Sass 樣式表編譯為普通 CSS。支援變數（$var）、巢狀、混入（@mixin、@include）、函式、@extend、@if/@for/@each 控制流，以及現代 Sass 模組（@use、@forward）。Sass 編譯器（約 5.4 MB）會在你第一次使用該模式時才按需載入。
LESS → CSS：把 LESS 樣式表編譯為普通 CSS。支援變數（@var）、巢狀、混入、引數化混入、運算、函式、守衛和匯入（@import）。編譯器（約 150 KB）會在你第一次使用該模式時才按需載入。
SASS → CSS：使用 Dart Sass 把縮排式 SASS 語法（.sass 檔案，沒有花括號、沒有分號）編譯為普通 CSS。縮排式 SASS 用有意義的空白替代花括號，因此更簡潔。SCSS 與縮排式 SASS 由同一個 Dart Sass 編譯器（約 5.4 MB）處理。
CSS → SCSS：把標準 CSS 轉換為 SCSS 語法，並自動做巢狀重構。會識別類 BEM 的命名模式，把 .parent-child 選擇器收進 &-child 巢狀塊；把後代選擇器轉成巢狀規則，把偽類選擇器轉成 &:state，並把重複出現的 CSS 自定義屬性提取為 SCSS $variables。如果你的 CSS 結構扁平而重複，這個工具能幫你重構成更乾淨的巢狀 SCSS。
CSS → LESS：把標準 CSS 轉換為 LESS 語法，並自動做巢狀重構。巢狀方式與 CSS→SCSS 相同：識別重複的父級模式、後代選擇器和偽類；並把重複出現的 CSS 自定義屬性提取為 LESS @variables。輸出是乾淨、帶巢狀的 LESS 程式碼。
層疊、優先順序，以及樣式為什麼會打架
當多條規則指向同一個元素時，由優先順序決定勝者：內聯樣式勝過 id，id 勝過類，類勝過元素選擇器，原始碼順序用來打破平局。!important 標記會推翻這套算術 —— 而且會讓下一次覆蓋變得更加困難。
優先順序是按選擇器分別計算的，而不是由上下文累加 —— 更具體的規則無論出現在樣式表的哪個位置都會勝出。
