Foundation-grid-sass-mixins
財団-SASS Mixins
最終的なCSS出力は、mixinを使用して構築されます。 ミックスインを使用して、これらのコンポーネントから独自のクラス構造を構築できます。 以下は、最終的なCSS出力を構築するために使用されるミックスインです。
グリッド列
グリッド列が作成されます。
@include grid-column($columns, $gutter);| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$columns 列の幅を設定します。 使用可能な値については、_grid-column（）_関数が参照されます。 |
Mixed | $grid-column-count |
| 2 |
$gutter 列の間にスペースを作成します。 |
Number | $grid-column-gutter |
グリッド列行
同じ要素と同等の行および列クラスが含まれます。 * grid-col-row（）*は想定される関数です。
@include grid-column-row($gutter);| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$gutter 側溝の列行の両側に幅を設定します。 |
Number | $grid-column-gutter |
グリッド列の崩壊
パディングが削除された後、列の溝は崩壊します。 想定される関数は* grid-col-collapse（）*です
@include grid-column-collapse;グリッド列の崩壊
パディングを再度追加した後、列の溝は崩壊しません。 想定される関数は* grid-col-uncollapse（）*です
@include grid-column-uncollapse;グリッドレイアウト
*$ n* で指定された数が各行に表示されるように、子要素のサイズを設定します。@include grid-layout($n, $selector);| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$n 行ごとに表示する要素の数。 |
Number | None |
| 2 |
$selector 子要素に使用するセレクター。 |
String | '.column' |
グリッド列位置
列は再配置されます。 想定される関数は* grid-col-pos（）*です。
@include grid-column-position($position);| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$position 指定した列数に応じて列を移動する方向を設定します。 負の数は列を左に、正の数は右側に押します。 |
Number | None |
グリッド列の位置
列の位置がリセットされます。 想定される関数は* grid-col-unpos（）*です。
@include grid-column-unposition;グリッド列オフセット
列は $ n 列だけ右にオフセットされます。 想定される関数は* grid-col-off（）*です。
@include grid-column-offset($n);| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$n grid-column（）mixinで受け入れられた値はすべて渡されます。 |
Number or List | None |
グリッド列の終わり
行の最後の列のデフォルトの動作は無効になっており、反対側の端に揃えられています。 想定される関数は* grid-col-end（）*です。
@include grid-column-end;グリッドコンテキスト
異なる列を使用するには、このミックスイン内で定義された列の動作を変更する必要があります。
@include grid-context($columns, $root) { }| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$columns 使用する列の数。 |
Number | None |
| 2 |
$root mixin内では、falseに設定されている場合、セレクターは親セレクター内にネストします。 |
Boolean | false |
グリッド行
グリッド行が作成されます。
@include grid-row($columns, $behavior, $width, $cf) { }| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$columns この行の列数を設定します。 |
Number | Null |
| 2 |
$behavior デフォルトのグリッドスタイルが変更されます。 |
Keywords | Null |
| 3 |
$width 行の最大幅。 |
Number | $grid-row-width |
| 4 |
$cf clearfixを含めるかどうか。 |
Boolean | true |
グリッド列サイズ
グリッド列の幅が設定されます。
@include grid-column-size($width);| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$width _grid-column（）_関数は、渡された値を受け入れます。 列の幅を設定します。 |
Number or List | $grid-column-count |
