Sass 波旁整齐断点上的多个列/边沟大小

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

所以从理论上讲，类似这样的方法是可行的：

@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:gotter比例保持不变

我已经调查过了，但不想将Compass作为依赖项引入

---

有人有解决方法吗？

如果你看看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.scs，您会看到：

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>

div.container{
@包括外部容器（）
}
小分区{
背景：红色；
@包括跨柱（12根中的3根）；
}
小高度分区{
背景：蓝色；
@包括跨柱（6根，共24根）；
}
小精灵{
背景：绿色；
@包括跨度柱（144根中的36根）；
}
1.
2.
3.
4.
1.
2.
3.
4.
1.
2.
3.
4.

奇点不依赖指南针。@lolmaus AndreyMikhaylov-谢谢，很高兴知道。安装说明中另有说明，但我现在已经删除了，它工作正常。显然，bower安装现在也可以使用。实际上，尽管任何Sass逻辑都不依赖Compass，但标准安装似乎需要Compass才能运行。我喜欢你的想法。不过，我认为在团队之间传达这种想法可能会很棘手。理想情况下会有一个更干净的解决方案，所以我现在选择奇点。这绝对是一个有用的特性，可以让Neat实现