跨 Bourbon Neat 断点的多个列/装订线大小

Question

我想使用 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);

这目前给了我一个灵活的列数，但列：装订线比例保持不变。

我已经调查了singularity.gs，但不想将 Compass 作为依赖项引入。

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

Answer 1

如果你看整洁的核心，你会看到

// 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。即 24 你是该边距大小的一半。如果你把它加倍到 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>