0

我想使用 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:gutter 比例保持不变。

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

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

4

1 回答 1

2

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

// 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>
于 2014-08-01T19:23:02.573 回答