如何使用 Susy 在列宽中包含填充答案

【问题标题】：How to include padding in column width with Susy如何使用 Susy 在列宽中包含填充
【发布时间】：2013-06-05 13:53:53
【问题描述】：

.main {
   background: green;
   @include span-columns(9,12);
}

在 Susy 中是否有一种简单或内置的方法可以在 .main 中包含一个 10 像素的填充，保持其初始宽度不变，这样绿色背景就不会流血？

提前致谢，如果之前有人问过此问题的版本，我们深表歉意。

【问题讨论】：

【解决方案1】：

有两种选择：

使用box-sizing: border-box; - 现在是supported by all the major browsers，Compass 有一个方便的box-sizing() mixin 可以为您处理前缀。如果你use it everywhere（像我一样），它可以改变 Susy 容器的大小，但是 Susy 提供了方便的 mixin 来为你解决所有这些问题。只需在设置容器之前将其添加到根目录 - 它会设置盒子模型，并让 Susy 知道对其进行调整：
```
@include border-box-sizing;
```
使用 $padding 参数 (docs) 到 span-columns mixin。使用这种方法，您只能使用用于声明网格的相同单位 - 就像那些一样，如果它们还不是流动的，它们将被转换为流动值。

只要您可以将 IE7 排除在外，您就会明白为什么选项 #1 更好。

【讨论】：