如何包括列寬填充有與Susy

Question

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

是否有與Susy一個簡單的或內在的方式包括，比如，10px的填充內。主要保持其初始寬度不變，以便綠色背景犯規流血？

在此先感謝，並對不起，如果此問題的一個版本之前已被詢問。

Answer 1

有兩種選擇：

1. 使用box-sizing: border-box; - 這是現在supported by all the major browsers，和Compass有一個方便的box-sizing()混入照顧前綴爲您服務。如果你use it everywhere（就像我一樣），它可以改變一個Susy容器的大小，但Susy帶着方便的mixin來修復所有這些。只需在根添加此，您將容器之前 - 這將設置盒模型，並讓與Susy知道調整它：

   @include border-box-sizing; 
   

2. 使用$padding參數（docs）到span-columns混入。使用這種方法，您僅限於用於聲明網格的相同單位 - 就像那些一樣，如果它們已經不流動，這些將被轉換爲流體值。

你可以看到爲什麼選項＃1更好，只要你確定讓IE7離開了樂趣。