如何使用 Susy 网格创建 'bootstrap' 风格的网格？

Question

我喜欢 Bootstrap 使用填充然后负边距 'row' 使所有内容对齐的方式。它消除了在尝试移除某些事物上的间距时对 :nth-child 选择器的需求。

但我喜欢在地图中指定排水沟的功能，并且它们被设置为百分比。我已经设法做到了，但是感觉很笨拙，想知道是否有更好的方法。

配置：

$split-gutter: (
  columns: 12,
  gutters: .8
);

获得一半的装订线值：

$susy-split-gutter-width: (span(1) * map-get($split-gutter, gutters)) / 2;

行样式：

.row {
  @include clear;
  margin-left: -$susy-split-gutter-width;
  margin-right: -$susy-split-gutter-width;
}

设置基列样式：

[class^="col-"] {
  float: left;
  padding-left: $susy-split-gutter-width;
  padding-right: $susy-split-gutter-width;
}

设置列宽：

.col-1 {
  width: span(1);
}

.col-2 {
    width: span(2);
}

...etc

没关系。但感觉就像我正在侵入 susy 值，我不确定这是否好。有没有更好的办法？

Answer 1

Susy 有一个 gutter-position 设置，已经允许您选择 split（半边距）或 inside（半边距填充）作为选项 - 所以您不需要不必自己计算。将 gutter-position 设置为 inside，gutter() 函数将 return 半个 gutter 宽度。这里是 in sassmeister，带有拆分的排水沟：

$susy: (
  columns: 12,
  gutters: 0.8,
  gutter-position: split,
);

@include border-box-sizing;

.container {
  @include container();
}

.row {
  margin-left: 0 - gutter();
  margin-right: 0 - gutter();
}

.column {
  @include span(2)
}

Answer 2

下面是 Susyboot 的解决方法：

$susy: (
  columns: 12,
  gutter-position: inside,
  global-box-sizing: border-box,
);

@include border-box-sizing;

.container {
  @include container();
  padding: 0 gutter();
  @include susy-clearfix;
}

.row {
  margin: 0 gutter() * -1;
  @include susy-clearfix;
}

这里是 gem:

gem install susyboot

欢迎与作者（我）一起努力，把项目做的更好。

如何使用 Susy 网格创建 'bootstrap' 风格的网格？

How to use Susy grids to create a 'bootstrap' style grid?

css

susy-sass