失われたソースからグリッドミックスを再作成

Question

古いサイトでは、グリッドを作成するためのミックスインが失われます。私はそれがsusyかsingularitygsを使用していたかどうか確信していません。しかし、これらの2つのうちの1つ、私は推測しています。

フロントエンドからは、レンダリングされた値を取得できました。論理は単純だと思われますが、誰でもそれらを生成するためにミックスインを再作成できますか？

ここに私が見つけたデータの一部があります。それは36の列のレイアウトを使用しますが、私はガターの大きさが何であるか分かりません。列には溝が含まれています。私はスパンのために、この設定

@mixin push1() { 
    margin-left: 2.8125%; 
} 
@mixin pull1() { 
    margin-left: -2.8125%; 
} 
@mixin span36() { 
    width: 100%; 
    float: left; 
    margin-left: 0; 
    margin-right: 0; 
} 

@mixin span34() { 
    width: 94.375%; 
    float: left; 
    margin-right: 1.25%; 
} 
@mixin span27() { 
    width: 74.6875%; 
    float: left; 
    margin-right: 1.25%; 
} 
@mixin span26() { 
    width: 72%; // this i guessed 
    float: left; 
    margin-right: 1.25%; 
} 
@mixin span25() { 
    width: 69.0625%; 
    float: left; 
    margin-right: 1.25%; 
} 
@mixin span24() { 
    width: 66.25%; 
    float: left; 
    margin-right: 1.25%; 
} 
@mixin span22() { 
    width: 60.625%; 
    float: left; 
    margin-right: 1.25%; 
} 
@mixin span18() { 
    width: 49.375%; 
    float: left; 
    margin-right: 1.25%; 
} 

@mixin span17() { 
    width: 46.5625%; 
    float: left; 
    margin-right: 1.25%; 
} 
@mixin span15() { 
    width: 40.9375%; 
    float: left; 
    margin-right: 1.25%; 
} 
@mixin span12() { 
    width: 32.5%; 
    float: left; 
    margin-right: 1.25%; 
} 

@mixin span11() { 
    width: 29.6875%; 
    float: left; 
    margin-right: 1.25%; 
} 

@mixin span9() { 
    width: 24.0625%; 
    float: left; 
    margin-right: 1.25%; 
} 

@mixin span6() { 
    width: 15.625%; 
    float: left; 
    margin-right: 1.25%; 
} 

Answer 1

で使用される一般的な簡単なプッシュ（）、プル（）およびスパン（）、ようなメソッドと数字を探しています

が、どうやらそれは36個の列があります1.25ガター。最後の列を除いて列の上に均等に樋を分割し、残りの列を列に分割します。あなたがそこに1.11764705882雨どいを持っている - - そう

spanX = (100 - (36/x-1)*1.25)/(36/x) 

テイクspan17は、

span17 = 100 - (36/17-1)*1.25)/(36/17) = 46.5625 

は私がしても、グリッドに理にかなっている理由を知らないthatsのが、数字の言うことthatsの。

1つの列をプッシュまたはプルすると、列だけを押すだけでなく、その列に余白が追加されます。 so

pushX = 100/x+1.25/x