sass - 什么是固定排水沟和流体列（并使用边距）的网格解决方案？

Question

这可以做到吗？我研究了 susy、jeet、singularity 等。我正在使用最新版本的 libsass。如果我切换到 Ruby，我可能会有更多选择。

我喜欢 susy，但对于我的下一个项目，我需要固定的排水沟（将它们设置为 px）。

欢迎提出建议！

Answer 1

如果我想通过这种方法使用 Susy（我最喜欢的网格），我会将装订线设置为 0 并在我的 Sass 中手动管理边距，如下所示：

$susy: (columns: 4, gutters: 0, math: fluid, output: float, last-flow: to)

@import "susy/susy"

body
    background-color: #fff
    margin: 0
    padding: 0
    font-size: 100%
    color: #000

.container
    @include container()

.box
    @include span(1)
    &:last-child
        @include last()
    div
        background-color: #ccc
        margin: 0 10px // Will result in 20px margin
    &:first-child
        div
            margin-left: 0 // Skip, if you want outer gutter
    &:last-child
        div
            margin-right: 0 // Skip, if you want outer gutter

现在，使用类似...的标记</p>

<div class="container">

    <div class="box">
        <div>A</div>
    </div>

    <div class="box">
        <div>B</div>
    </div>

    <div class="box">
        <div>C</div>
    </div>

    <div class="box">
        <div>D</div>
    </div>

</div>

……你会得到带有固定排水沟的流体柱——这不是 Susy 的排水沟，而是一个“可见的”排水沟。当然，如果您需要依赖断点的行为，则需要做一些额外的工作，但恕我直言。

除了 Susy：Bootstrap 使用固定的装订线宽度。尽管我发现从 Bootstrap 膨胀中撕下网格非常麻烦，但如果我只想要一个网格而不需要其他任何东西的话。