0

sass を使用して独自の小さな列グリッドを作成しようとしていますが、この問題に頭を悩ませることはできません。

これは私がこれまでに思いついたものですが、正しい解決策ではありません。このようなきれいなグリッドを取得していますが、問題は、すべての行で余分なパーセンテージを削除していることです。

各列の幅の 1% (この場合) の gutter_width を削除し、gutter_width を左マージンとして使用して部屋を置き換えます。したがって、列ごとにパーセンテージを削除して余白として追加し、ガターを作成しています。行の最初の子のマージンを削除すると、99% の行が残るため、問題が発生します。

誰かがこれで私を助けてくれますか? または、より良い方法を提案してください。

$container_width: 970px; // Main container width
$gutter_width: 1%;
$columns: 12; // Twelve columns


/*  #Calculate the columnwidths  */
/*  Calculate the width of a single column and multiple it by columncount
================================================== */

@for $i from 1 through $columns {
    .column-#{$i} {
        width: ((100% / $columns) * $i) - $gutter_width;
    }
}

.container {
    max-width: $container_width;
    margin: 0 auto;
}

.row {
    width: 100%;
    margin: 1em 0;
    @include pie-clearfix;
}

// Select all element that contains class 'column'
[class*="column"] {
    float: left;
    margin-left: $gutter_width;
    &:first-child {
        margin-left: 0;
    }
}
4

2 に答える 2

1

コンテキストとスパン幅の両方で、列よりもガターが 1 つ少ないはずです。正しい計算は実際には次のとおりです。

// the width of a single column has to account for "$columns - 1" gutters.
$column_width: (100% - $gutter_width * ($columns - 1)) / $columns;

@for $i from 1 through $columns {
  .column-#{$i} {
    the width of a span should cover "$i" columns, plus "$i - 1" gutters
    width: $column-width * $i + $gutter_width * ($i -1);
  }
}

このようなクラスは、グリッド スパンを他のグリッド スパン内にネストする場合、かなり壊れやすいシステムを作成しますが、基本はカバーする必要があります。Sass のようなプリプロセッサを使用するようになったら、.column-xクラスを完全に残し、ミックスインのみを使用することをお勧めします。

于 2013-09-17T04:02:41.387 に答える
0

最初の子から $gutter_width を削除したため、最後の子に再度追加する必要があります。これを行う 1 つの方法は、これをループ内に配置することです。

&:last-of-type{
   width: (100% / $columns) * $i;
}

そのようにして、列が最後の要素である場合、幅は余分な 1% で再計算されます。古いブラウザのサポートが必要な場合は、.last-column などと呼ばれるユーティリティ クラスに置き換えてください。

于 2013-09-16T22:01:28.373 に答える