Sass参考(Sass Reference)
优质
小牛编辑
129浏览
2023-12-01
描述 (Description)
SASS(Syntactically Awesome Stylesheet)是一个CSS预处理器,它有助于减少CSS的重复并节省时间。
Mixins
最终的CSS输出是使用mixin构建的。 mixin可用于从这些组件构建您自己的类结构。 以下是用于构建最终CSS输出的mixins。
flex-grid-row
使用此mixin为flex网格行创建Container。
@include flex-grid-row($behavior, $width, $columns, $base) { }
Sr.No. | 名称和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $behavior 默认网格样式已修改。 | Keyword or List | null |
2 | $width 最大行宽。 | Number | $grid-row-width |
3 | $columns 设置此行的列数。 | Keyword or List | null |
4 | $base 在创建重复输出的同一元素上调用mixin两次很有用。 | Boolean | true |
flex-grid-column
使用mixin创建Flex网格列。 在父Flex行上使用unstack类,可以将列拉伸到容器的整个宽度。
@include flex-grid-column($columns, $gutter);
Sr.No. | 名称和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $columns flex-grid-column()函数用于可用值。 | Mixed | Null |
2 | $gutter 在列之间创建空间 | Number | $grid-column-gutter |
flex-grid-order
弹性网格列的来源已更改。 最低列号首先出现在布局中。
@include flex-grid-order($order);
Sr.No. | 名称和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $order 申请订单号。 | Number | 0 |
功能 (Functions)
以下是弹性网格的功能 -
flex-grid-column
flex属性是针对flex gird列计算的。 相同的值被接受为基本的grid-column()函数以及以下参数 -
null - 将列扩展为完整空间。
shrink - 合同列。
flex-grid-column($columns)
Sr.No. | 名称和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $columns 设置特定列宽。 | Mixed | null |