Question

我正在尝试将Bootstrap等效网格复制到我的项目中。我喜欢这个想法，但我遇到配置问题。我在最新版本上使用Codekit。

我希望网格使用以下内容：

box-sizing：border-box;
网格项目每侧15px排水沟
没有不需要的保证金（除非使用@include push（）;）。
12列网格默认

这些是我目前的设置：

$susy: (
    container:          1170px,
    columns:            12,
    gutter:             .25,
    global-box-sizing:  border-box,
    output:             isolate
);

当我想创建一个5列网格时：

.members{

  &--li{
    @include span(1 of 5);
  }

 }

我期待这个：

.members--li{
  width: 20%;
  float: left;
}

但得到了这个：

.members--li{
  width: 16.6666666667%;
  float: left;
  margin-right: 4.1666666667%;
}

我不确定保证金权利来自哪里，由于这个添加它永远不会是5列网格，我也预期20％宽度。我知道默认值是12列，但我已经设置了1列。

Answer 1

啊，这有点棘手。是在相同的情况下写了一些mixins来生成一个像susy和断点的网格引导程序。还不完美但是做一份工作^^

结帐：http://sassmeister.com/gist/toh82/6d31d28888e930783f02

因此，请根据需要更改断点值，这可能对您有所帮助。目前我的要点中缺少容器尺寸的迭代，如果这是一个问题，请告诉我。

实现BS-Grid的主要内容之一是gutter-position: inside和不同的container max-width。

SCSS Susy配置设置

1 个答案: