如何使用 Susy 网格创建“引导”样式网格？答案

【问题标题】：How to use Susy grids to create a 'bootstrap' style grid?如何使用 Susy 网格创建“引导”样式网格？
【发布时间】：2016-08-30 05:40:51
【问题描述】：

我喜欢 Bootstrap 使用填充然后负边距“行”以使所有内容对齐的方式。在尝试删除某些东西的排水沟时，它不再需要 :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 价值观，我不确定这是否很棒。有没有更好的办法？

【问题讨论】：

标签： css susy-sass

【解决方案1】：

Susy 有一个 gutter-position 设置，它已经允许您选择 split（半边距）或 inside（半边距填充）作为选项，因此您不必自己进行数学运算。将装订线位置设置为inside，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)
}

【讨论】：

我没有意识到我可以只使用gutter() 来获得该值。谢谢！

【解决方案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 install susyboot

随时与作者（我）合作，让项目变得更好。

【讨论】：