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

Question

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

以蓝图为例： ie hacks 样式表阻止使用容器/跨度-X 类作为混合，因为混合类不会出现在 html 元素中。例如放

#content { .container; }

在您的 .less 样式表中，不会应用 ie hack（这很有意义）。

所以我想知道是否有人已经“移植”了蓝图或 960gs 到更少的 css？我在谷歌上看，但没有发现任何东西（我自己试过，但考虑到使用的 IE hacks/css 选择器，转换是不平凡的）。

PS：另一个问题与SO类似，但作者决定自己启动一个框架，我更喜欢使用“流行”框架

编辑：从较少的文件（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 不会起作用，从 LESS 的角度来看，它非常复杂看法）

score 0 · Accepted Answer

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

编辑：另一个看起来很不错的：http ://semantic.gs/

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

我正在使用带有 LESS 的蓝图，它运行良好。您需要做的只有一件事。在您的 HTML 中确保基础div有class="container". 如果您这样做，其余的将正常工作而不会出现任何故障。

将您的 screen.css 重命名为 screen.less

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

score 0 · Accepted Answer

0

我喜欢使用带有 {less} 的 Less 框架。只是因为它把人们迷惑到了极点......

于 2011-05-20T19:09:47.930 回答

4 回答 4