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

Question

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

在Susy中是否有一种简单或内置的方式，例如，在内部包含10px填充.main保持其初始宽度完整，以便绿色背景不流血？

提前致谢，如果以前曾询问此问题的某个版本，我很抱歉。

Answer 1

有两种选择：

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;
   

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

你可以看到为什么选项＃1更好，只要你可以让IE7脱离乐趣。