如何在容器上设置填充？

Question

我有一个 header 全宽，我想使用 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 方法可以做到这一点，但您可以创建自己的混合或占位符 class 来为您处理它（甚至一路使用 susy）：

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

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

如何在容器上设置填充？

How to set padding on the container?

css

sass

susy-compass

susy-sass

susy