compass/sass 中的嵌套列

Question

我一直在研究指南针，虽然玩和使用它是一件有趣的事情，但有一件事情困扰着我（除了无法添加填充，因为它会破坏网格），我该如何嵌套列？

我希望能够做蓝图所做的事情：嵌套容器，比如说，我有一个 24 列的页面，分为两列（17 列和 7 列）。在该页面的右侧（7 列），我想将一些元素分成两列（2 列和 5 列）。

我试过了：

#main
  +container

  #main-content
    +column(17)
    +box-padding(17, 10px)
    :margin
    :right 0

  #sidebar
    +column(7, true)
    +box-padding(7, 10px)

这是主页的代码。侧边栏包含一个带有一些标签和输入字段的列表

li
  +container
  :margin
    :bottom 5px

label
  +column(2)
  :margin
    :right 0

input
  +column(5, true)

它有点可以工作，但是在萤火虫中检查 li 显示它的宽度实际上是 950px 而不是只有 270px，因为它只有 7 列。我尝试在谷歌上搜索嵌套列，但似乎在指南针中找不到任何示例。我也尝试过 wiki 和文档，但无济于事。

Answer 1

我认为问题的一部分（也许是整个问题？）是您将container mixin 应用于li。该 mixin 将宽度定义为 !blueprint_container_size 的值，默认情况下，其值为 950px（但可以被覆盖）。删除它，你应该没事。容器旨在描绘整体，而不是整体中的部分。