良好的CSS來LESS

作爲一名用戶體驗設計師，我試圖優化我的工作流程。我想盡可能快地從HTML轉換到格式良好的CSS。構思：發佈您的HTML，生成CSS，編譯爲less，爲樣式添加屬性，然後重新編譯爲CSS進行部署。良好的CSS來LESS

HTML：

<header> 
    <nav> 
    <ul> 
     <li><a></a></li> 
     <li><a></a></li> 
     <li><a></a></li> 
    </ul> 
    </nav> 
<header>

使用http://lab.xms.pl/css-generator/

header { } 
header nav { } 
header nav ul { } 
header nav ul li { } 
header nav ul li a { }

然後LESS版本是建立與某種編譯器的輸出CSS（這是我所需要的）

header{ 
**declarations** 
    nav{ 
    **declarations** 
    ul{ 
    **declarations**   
     li{ 
     **declarations** 
     a{ 
     **declarations** 
     } 
     } 
     } 
     } 
    }

最後開發完成後重新編譯爲普通CSS，並準備使用0等工具進行部署（只是一個例子，我敢肯定有很多這樣的工具）

我知道有些事情需要考慮，比如mixins vs使用Cleancss這樣的工具連接規則，但是嵌套對我來說是最重要的特性，一遍又一遍的規則是最可怕的建立/看看。

要清理未使用的CSS，我們可以使用unused-css（dot）com或類似的工具。

有沒有人有完成任務的工具？任何人都有興趣建立這個？

歡迎有想法建議的聚會。自動完成這項任務至少可以真正將我們提升到更高的水平，所以請不要寫下如果關閉，仔細考慮我的建議，然後大喊「REWRITE IT」「TOUGH IT OUT」等。

謝謝提前並希望聽到一些好的意見。

來源

2011-12-05 Jeff Scott Ward

這似乎是一個壞主意，它不會產生大量的CSS選擇器，你不會最終使用？看起來比較容易，只需要拉一頁半頁，然後在另一半開始編碼。 LESS已經提供了一種使嵌套選擇器更容易的方法。我可能在這裏忽略了一點。 –

我認爲整個過程有點有缺陷。 CSS的整個概念是規則級聯下來，並且不需要每個DOM級別的每個元素的規則。這似乎鼓勵無視CSS的基本原理。 –

這就是爲什麼我只包含一個快速使用清潔工具如unused-css.com –

LESS預處理器的PHP實現有一個名爲Lessify的工具。您可以從the project's git repo或give it a go online下載。我希望這是你所需要的。

來源

2011-12-06 17:38:34 mingos

謝謝你mingos！它至少做了我剛纔所要求的，也許它可以做得更多！我認爲css->少可能是學習和將舊項目帶入未來的巨大步驟。 –

沒問題，我很高興我可以幫助:) – mingos

良好的CSS來LESS

回答

相關問題