css - Susy で列幅にパディングを含める方法

Question

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

緑の背景がにじまないように、.main 内に 10px のパディングを含めて、最初の幅をそのまま維持する簡単な方法または作り付けの方法はありますか?

この質問のバージョンが以前に尋ねられた場合は申し訳ありません。

score 2 · Accepted Answer

次の 2 つのオプションがあります。

使用box-sizing: border-box;- これは現在、すべての主要なブラウザーでサポートされており、Compass にbox-sizing()はプレフィックスを処理する便利な mixin があります。どこでも (私のように)使用すると、Susy コンテナーのサイズを変更できますが、Susy には便利な mixin が付属しており、すべてを修正することができます。コンテナを設定する前に、これをルートに追加するだけです。これにより、ボックスモデルが設定され、Susy に調整するように通知されます。
```
@include border-box-sizing;
```
$paddingミックスインに引数 ( docs ) を使用しますspan-columns。このアプローチでは、グリッドの宣言に使用したのと同じ単位に制限されます。それらと同じように、まだ流動的でない場合、これらは流動的な値に変換されます。

IE7 を楽しみにしない限り、オプション #1 の方が優れている理由がわかります。

1 に答える 1