Foundation - SASS Mixins
使用 mixin 构建最终的 CSS 输出。mixin 可用于从这些组件构建您自己的类结构。以下是用于构建最终 CSS 输出的 mixin。
grid-column
创建了网格列。
@include grid-column($columns, $gutter);
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$columns 设置列宽。 grid-column() 函数用于获取可用值。 |
Mixed | $grid-column-count |
| 2 |
$gutter 在列之间创建空间。 |
Number | $grid-column-gutter |
grid-column-row
将行和列类等效于同一元素。 grid-col-row() 是假定函数。
@include grid-column-row($gutter);
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$gutter 设置间距的列行两侧的宽度。 |
数字 | $grid-column-gutter |
grid-column-collapse
移除填充后，间距在列上折叠。假定函数为 grid-col-collapse()
@include grid-column-collapse;
grid-column-uncollapse
重新添加填充后，列上的边线将展开。假定函数为 grid-col-uncollapse()
@include grid-column-uncollapse;
grid-layout
设置子元素的大小，以便 $n 中指定的数字出现在每一行中。
@include grid-layout($n, $selector);
| Sr.No. | 名称和说明 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$n 每行显示的元素数量。 |
数字 | None |
| 2 |
$selector 用于子元素的选择器。 |
string | '.column' |
grid-column-position
列已重新排列。假定函数为 grid-col-pos()。
@include grid-column-position($position);
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$position 根据指定的列数设置移动列的方向。负数将列推向左侧，正数将列推向右侧。 |
数字 | None |
grid-column-unposition
重置列位置。假定函数为 grid-col-unpos()。
@include grid-column-unposition;
grid-column-offset
列向右偏移 $n 列。假定函数为 grid-col-off()。
@include grid-column-offset($n);
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$n grid-column() mixin 接受传递的任何值。 |
数字或列表 | None |
grid-column-end
行中最后一列的默认行为被禁用，即与相反边缘对齐。假定函数为 grid-col-end()。
@include grid-column-end;
grid-context
要使用不同的列，应更改此混合中定义的列的行为。
@include grid-context($columns, $root) { }
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$columns 要使用的列数。 |
数字 | None |
| 2 |
$root 在混合中，当设置为 false 时，选择器将嵌套在父选择器内。 |
boolean | false |
grid-row
已创建网格行。
@include grid-row($columns, $behavior, $width, $cf) { }
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$columns 设置此行的列数。 |
数字 | Null |
| 2 |
$behavior 修改默认网格样式。 |
关键字 | Null |
| 3 |
$width 行的最大宽度。 |
数字 | $grid-row-width |
| 4 |
$cf 是否包含 clearfix。 |
boolean | true |
grid-column-size
网格列宽度已设置。
@include grid-column-size($width);
| Sr.No. | 名称和说明 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$width grid-column() 函数接受任何传递的值。设置列宽。 |
数字或列表 | $grid-column-count |
foundation_the_grid.html
