與LESS css一起使用的最佳網格框架是什麼？

Question

我想使用網格框架（如藍圖/ 960.gs/...）與LESS(.js)但它看起來有一些問題，當你決定走那條路：

例如與藍圖： 的即黑客樣式表可以防止使用容器/ span-X類作爲mixin，因爲混合類不會出現在html元素中。 例如把

#content { .container; } 

在.LESS樣式表時，即黑客不會得到應用（以及是否有意義）。

所以我想知道是否有人已經「移植」藍圖或960gs到更少的CSS？我看谷歌，但沒有發現任何（我嘗試自己，但考慮到使用IE hacks/css選擇器，轉換是不平凡的）。

PS：另外一個問題是相似的左右，但筆者決定對自己開始了一個框架，我更願意用「流行」框架

編輯：從應用類時的問題 例子更少的文件（混入）： 在960.gs你有規則：

.container_12 .grid_3{ 
    width:220px; 
} 

的HTML（簡體）：

<div id="main"> 
    <div id="col1"> 
    </div> 
    <div id="col2"> 
    </div> 
</div> 

隨着LESS，這將是很好定義樣式表這樣的佈局：

#main{ 
    .container_12 
} 

#col1 { 
    .alpha; 
    .grid_3; 
} 

#col2 { 
    .omega; 
    .grid_9; 
} 

，但它不會工作，因爲以下（規則不適用於col1和COL2）沒有關於＃​​COL1在爲線索#main（選擇器#main＃col1不會這麼做，從LESS的角度來看它非常複雜）

Answer 1

編輯13/07/2012：Twitter的引導是我最喜歡的新選擇。

編輯：另外一個看起來很漂亮：http://semantic.gs/

我沒有帶測試過，但http://centage.peruste.net/是LESS.js CSS框架。

Answer 2

您不能在#main中嵌套＃col1和＃col2嗎？

#main { 
    #col1 {.alpha; .grid_3;} 
    #col2 {.omega; .grid_3;} 
} 

應該給輸出#main #col1 {rendered CSS code}

Answer 3

我喜歡使用較少的框架與{}少。只是導致它將人們混淆到極致...

Answer 4

我使用LESS的藍圖，它的工作原理非常漂亮。只有一件事是你需要做的。在你的HTML確保基地div有class="container"。如果你這樣做，其餘的將毫無問題地工作。

重命名screen.css到screen.less

@import "screen.less"; 
#header {  
    .span-24; .last; // Now, Have Fun! :D 
     }