Susyのスパン関数を使用したネストスプリットギャッター

Question

スティーは、mixinではなくspan関数を使用してスプリットギャッターを持つ両親の子供を説明する方法を構築していますか？正しい結果を得るの両方が、私はより多くのがあるのか​​はわからない - width: span(3 of 5) + gutter()を - - またはガターのスタイルを変更する - width: span(3 of 5 after)

$susy: (columns: 8, gutters: 0.3, global-box-sizing: border-box, gutter-position: split) 


.full_width 
    width: span(5) 

.three_columns 
    width: span(3 of 5) 

を手動で側溝を追加：ここに子供が（予想通り）側溝のショートを終わります直感的なやり方で、私自身のnested-span関数をラップする以外にも書くことができます。

Answer 1

Susyのスプリットガターグリッドでは、親要素が余分に広がっていることが予想され、子要素は狭くなる（ガターを押し込んで）。これは、親にnestを使用すると、mixinによって自動的に処理されます。 span(5 nest)。

あなたのケースでは、子供は実際にガターを欠いていません - 数学はすべて間違っています。 Susyはspan/wide-containerを計算しようとしていますが、コンテナは実際には幅がありません。誤差はガターの幅に近似しますが、正確ではありません。ガターを追加すると近づくでしょうが、正確ではありません。

afterの構文は、アフターバーターが通常の幅のコンテナ（あなたが持っているもの）を期待しているため、完全に機能します。基本的には、Susyにspan/wide-containerの代わりにspan/containerを割り振るように指示しています。

some examples on codepen - あなたの持っているもの、Susyの予想、そしてafterのハックの仕組み。

Susy 2.xは、この状況を処理するためのより良い方法はありません。予想されるユースケースではないからです。 Susy 3.xでは、親子の広がり（狭いか広い）を別々にコントロールして、どんな状況でも必要な数学を得ることができます。