0

ドキュメントを読むと、スージーはガター幅を列幅のパーセンテージと見なします。

幅が768pxのコンテナがあります

私は3つの列を持っています

各ガターを 768px の 5%、つまり 38.4px にしたい

スプリットのガター位置を使用しています

次のファイブを実行すると、3.33333% のガター幅が得られます。

+with-layout(3 38.4px)
  .three-col
    +span(3 of 3)

しかし、これを行うと、5% の正しいガター幅が得られます。

+with-layout(3 0.428572)
  .three-col
    +span(3 of 3)

私は試行錯誤でこの数を見つけましたが、数式をうまく解くことができないようです.

以下の関係があると思います。

列数: 3

ガターの数: 6

コンテナの望ましいパーセンテージ ガター: 5%

(コンテナーの) 望ましいガター パーセンテージを取得するために Susy に提供する必要がある数値: 0.428572

コンテナ幅のパーセンテージに基づいて Susy ガター幅を設定するにはどうすればよいですか?

4

1 に答える 1

0

コンテナーのパーセンテージを Susy が使用できるガター値に変換する関数を Sass で作成しました。ここでは分割ガターを想定しているため、列の両側に半分のガターがあります。

多分これは他の誰かを助けるでしょう！

//Convert a percentage of the container to a susy gutter width
//This function assumes a split gutter position
@function calculate-susy-gutter($containerWidth, $numCols, $percentage-of-container: 0.05)
  //get the number of gutters
  $numGutters: $numCols * 2
  //work out the target gutter width based on the container
  $singleGutterWidth: $containerWidth * $percentage-of-container
  //work out the width of all the gutters
  $totalGutterWidth: $singleGutterWidth * $numGutters
  //work out the width of all the columns
  $totalColumnWidth: $containerWidth - $totalGutterWidth
  //work out the width of one column
  $singleColumnWidth: $totalColumnWidth/$numCols
  //work out the percentage that single gutter is of a column
  $gutterPercentageOfColumn: $singleGutterWidth/$singleColumnWidth
  //multiply the value by two
  //Using the split gutter position Susy sees the gutter on each side as half a gutter
  //so we need to double it
  //Therefore the original percentage of the container accounted for one half gutter
  @return $gutterPercentageOfColumn * 2
于 2014-09-03T17:40:35.847 に答える