跨波旁整洁断点的多个列/槽大小

Question

我想使用Bourbon/Neat创建一个灵活的响应网格，它不仅可以改变列的数量，而且还允许我配置列之间的gutter间距，跨越断点。

所以从理论上讲，这样做是可行的:

@import "mixins/neat/neat-helpers";
$visual-grid: true;
$visual-grid-color: yellow;
$visual-grid-index: front;
$visual-grid-opacity: 0.3;
$gutter: 5%;
$column: 5%;
$gridS: new-breakpoint(min-width 0 32);
$gutter: 1.5625%;
$column: 3.515625%;
$gridL: new-breakpoint(min-width 48em 20);

这给了我一个灵活的列数，但column:gutter的比例保持不变。

我研究过奇点。但是不希望将Compass作为依赖项引入。

有人有修复/解决方法吗?

Answer 1

如果你看一下neat的核心，你会看到

// Flexible gutter
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
  @return percentage($gutter / $container-width);
}

---

和_span-columns。SCSS你看:

margin-#{$direction}: flex-gutter($container-columns);

---

所以你可以取一个网格如果你让列大于12。我给你一半的利润。如果把它翻倍成48，就是原来的1/4。等。所以你可以调整你的列的大小，以任何总大小，并使你的水槽灵活的基础上。您总是可以反转效果或尝试不同的列大小来获得不同的结果。这有帮助吗?或者至少是背后的理论?

div.container {
@include outer-container()
}
div.small {
background: red;
@include span-columns(3 of 12);
}
div.small-alt {
background: blue;
@include span-columns(6 of 24);
}
div.small-crazy {
background: green;
@include span-columns(36 of 144);
}
<div class="container">
    <div class="small">1</div>
    <div class="small">2</div>
    <div class="small">3</div>
    <div class="small">4</div>
</div>
<div class="container">
    <div class="small-alt">1</div>
    <div class="small-alt">2</div>
    <div class="small-alt">3</div>
    <div class="small-alt">4</div>
</div>
<div class="container">
    <div class="small-crazy">1</div>
    <div class="small-crazy">2</div>
    <div class="small-crazy">3</div>
    <div class="small-crazy">4</div>
</div>