css - 如何使用 Susy 在列宽中包含填充

Question

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

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

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

Answer 1

有两种选择：

1. 使用box-sizing: border-box;- 现在所有主要浏览器都支持这一点，并且 Compass 有一个方便的box-sizing()mixin 可以为您处理前缀。如果你在任何地方都使用它（就像我一样），它可以改变 Susy 容器的大小，但是 Susy 提供了方便的 mixin 来为你解决所有这些问题。只需在设置容器之前将其添加到根目录 - 它将设置盒子模型，并让 Susy 知道对其进行调整：

   @include border-box-sizing;
   

2. 对mixin使用$padding参数 ( docs ) 。span-columns使用这种方法，您只能使用用于声明网格的相同单位 - 就像那些一样，如果它们还不是流体，它们将被转换为流体值。

您可以看到为什么选项 #1 更好，只要您可以将 IE7 排除在外。