Mixins

优质
小牛编辑
126浏览
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

每行显示的元素数。

NumberNone
2

$selector

用于子元素的选择器。

String'.column'

grid-column-position

列重新排列。 假设的函数是grid-col-pos()

@include grid-column-position($position);

Sr.No.名称和描述类型默认值
1

$position

根据指定的列数设置移动列的方向。 负数将列向左推,正数向右推。

NumberNone

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 ListNone

grid-column-end

禁用与对齐边缘对齐的行中最后一列的默认行为。 假设的函数是grid-col-end()

@include grid-column-end;

grid-context

要使用不同的列,应更改此mixin中定义的列的行为。

@include grid-context($columns, $root) { }

Sr.No.名称和描述类型默认值
1

$columns

要使用的列数。

NumberNone
2

$root

在mixin内部,当设置为false时,选择器将嵌套在父选择器内。

Booleanfalse

grid-row

将创建一个网格行。

@include grid-row($columns, $behavior, $width, $cf) { }

Sr.No.名称和描述类型默认值
1

$columns

设置此行的列数。

NumberNull
2

$behavior

默认网格样式已修改。

KeywordsNull
3

$width

最大行宽。

Number$grid-row-width
4

$cf

是否包含clearfix。

Booleantrue

grid-column-size

网格列宽度已设置。

@include grid-column-size($width);

Sr.No.名称和描述类型默认值
1

$width

grid-column()函数接受任何传递的值。 设置列的宽度。

Number or List$grid-column-count