向简单的 Susy 布局添加填充答案

【问题标题】：Adding padding to simple Susy layout向简单的 Susy 布局添加填充
【发布时间】：2017-03-14 06:20:14
【问题描述】：

在简单的 susy 布局中添加填充似乎打破了我的网格。将填充添加到 .item 类会破坏原本正常工作的 12 列网格。

$susy: (
  columns: 12,
  gutters: 1/4,
  gutter-position: split
);
$grid-padding:1em;
.wrap {
  border: 1px solid red;

  .item{
    background: lightGrey;
    padding-bottom: 10px;
    padding: 10px; //<= THIS BREAKS THE GRID
  }
}

  .wrap {
    border: 1px solid red;
    @include container(900px);

  }

  .item {
    &.main{
      @include span(8 first);
    }
    &.side {
      @include span(4 last);
    }
  }
  .main:after {
    content: '';
    display: block;
    clear:both;
  }

Meister

The documentation 看起来好像可以将填充指定为 span mixin 的第三个参数，但这对我也不起作用。

【问题讨论】：

提示一下，你的 sass 文件需要编辑。您使用了具有误导性的错误缩进，您重复了 .wrap 选择器和 border: 1px solid red 并且您没有真正充分利用嵌套。

标签： css sass susy

【解决方案1】：

这就像使用 Susy 的内置 mixin 全局设置 box-sizing 属性一样简单：

@include global-box-sizing(border-box):

或者，可以选择仅将其设置在一个 span mixin

@include span(6 of 12 border-box)

Relevant Susy docs

超级相关的 Susy 引用：

我们强烈建议使用全局边框设置，尤其是在您使用任何类型的内部排水沟时。

【讨论】：