如果這個工具幫到了你,可以請作者喝杯咖啡 ☕
實現LESS與CSS程式碼雙向轉換,支援變數、巢狀等高階特性處理
tools.css-preprocessor-converter.cssToPreprocessorHint
前端開發中常面臨LESS前處理器程式碼與瀏覽器可讀CSS程式碼的轉換需求。本工具透過實時編譯引擎,準確處理LESS的變數(@var)、混合(Mixin)、巢狀規則等特性,輸出符合W3C標準的CSS程式碼;反向轉換時,會自動重構CSS選擇器為LESS巢狀語法,保留關鍵註釋結構。
LESS變數轉換後會丟失嗎?
不會。所有@變數會被編譯為CSS自定義屬性(--var)保留值。
如何轉換包含@import的LESS檔案?
需手動合併被引用的檔案內容後轉換,本工具不處理外部檔案依賴。
CSS轉LESS時,媒體查詢中的巢狀規則可能需手動調整;轉換含!important的樣式時建議檢查優先順序。
典型場景:將Bootstrap的LESS原始碼(如variables.less)轉換為CSS時,建議先處理依賴檔案順序。示例輸入輸出:@btn-color: #337ab7; → --btn-color: #337ab7;