Question

我有一个标题全宽，我想使用Susy数学设置填充，而不是每次在我的布局中填充容器时重写。

例如：

CSS：

@import "susy";
@import "compass/reset";

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

#header {
  height: 80px;
  background: red;
}

#footer {
  height: 80px;
  background: blue;
}

HTML

<header id="header"></header>
<footer id="footer"></footer>

它们都是全宽，但当然没有填充。问题是：我如何插入整个Susy默认值的相同填充，如span，而不需要在容器上使用padding-left和padding-right手动执行此操作？

Answer 1

Susy没有对容器填充做任何事情。没有Susy方法可以做到这一点，但你可以创建自己的mixin或占位符类来为你处理它（甚至沿途使用susy）：

$container-padding: gutter(); // any size you want

@mixin container-padding($size: $container-padding)  {
  padding-left: $size;
  padding-right: $size;
}

如何在容器上设置填充？

1 个答案: