Question

我喜欢Bootstrap使用填充的方式，然后负面地限制＆＃39;行＆＃39;把一切都搞定。在尝试删除某些内容的装订线时，它删除了对: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

没关系。但感觉就像是我诋毁了羞怯的价值观而且我不确定它是多么伟大。有没有更好的办法？

Answer 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)
}

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 install susyboot

随意与作者（我）联手，让项目更好。

如何使用Susy网格创建一个＆＃39; bootstrap＆＃39;风格网格？

2 个答案: