Mixins
优质
小牛编辑
131浏览
2023-12-01
最终的CSS输出是使用mixin构建的。 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 设置排水沟列行两侧的宽度。 | Number | $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 每行显示的元素数。 | Number | None |
| 2 | $selector 用于子元素的选择器。 | String | '.column' |
grid-column-position
列重新排列。 假设的函数是grid-col-pos() 。
@include grid-column-position($position);
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $position 根据指定的列数设置移动列的方向。 负数将列向左推，正数向右推。 | Number | 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接受的任何值都被传递。 | Number or List | None |
grid-column-end
禁用与对齐边缘对齐的行中最后一列的默认行为。 假设的函数是grid-col-end() 。
@include grid-column-end;
grid-context
要使用不同的列，应更改此mixin中定义的列的行为。
@include grid-context($columns, $root) { }
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $columns 要使用的列数。 | Number | None |
| 2 | $root 在mixin内部，当设置为false时，选择器将嵌套在父选择器内。 | Boolean | false |
grid-row
将创建一个网格行。
@include grid-row($columns, $behavior, $width, $cf) { }
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $columns 设置此行的列数。 | Number | Null |
| 2 | $behavior 默认网格样式已修改。 | Keywords | Null |
| 3 | $width 最大行宽。 | Number | $grid-row-width |
| 4 | $cf 是否包含clearfix。 | Boolean | true |
grid-column-size
网格列宽度已设置。
@include grid-column-size($width);
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $width grid-column()函数接受任何传递的值。 设置列的宽度。 | Number or List | $grid-column-count |