与LESS css一起使用的最佳网格框架是什么？

Question

我想使用LESS(.js)的网格框架（例如blueprint / 960.gs / ...），但是当你决定采用这种方式时它看起来有些问题：

例如蓝图： ie hacks样式表可以防止将容器/ span-X类用作mixin，因为混合类不会出现在html元素中。 例如，把

#content { .container; } 

在你的.less样式表中，即hacks将无法应用（并且有意义）。

所以我想知道是否有人已将“蓝图”或960gs“移植”到更少的CSS？我看谷歌但是没有找到任何东西（我试过自己，但考虑到使用IE黑客/ css选择器，转换非常重要）。

PS：另一个问题在SO上是类似的，但作者决定自己创建一个框架，我更喜欢使用“流行”框架

编辑： 从less文件（mixins）应用类时出现问题的示例： 在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），因为LESS没有关于#col1在#main中的线索（选择器#main＃col1不会做的伎俩，它的相当复杂少点观点）

Answer 1

你不能在#main？

中嵌套＃col1和＃col2

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

应该输出#main #col1 {rendered CSS code}

Answer 2

我喜欢将Less框架与{less}一起使用。只是因为它让人们陷入极端......

Answer 3

我正在使用蓝图与LESS，它的工作非常精彩。你需要做的只有一件事。在您的HTML中，确保基础div具有class="container"。如果你这样做，剩下的就会没有任何故障。

将screen.css重命名为screen.less

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

Answer 4

编辑13/07/2012：Twitter Bootstrap是我最喜欢的选择。

编辑：另一个看起来很漂亮：http://semantic.gs/

我还没有测试过，但是http://centage.peruste.net/是一个LESS.js css框架。