Foundation - Flex Grid SASS 参考

描述

SASS (Syntactically Awesome Stylesheet) 是一种 CSS 预处理器，它有助于减少 CSS 代码的重复，从而节省时间。

最终的 CSS 输出是使用混合宏构建的。混合宏可以用来根据这些组件构建你自己的类结构。以下是用于构建最终 CSS 输出的混合宏。

使用此混合宏创建一个 Flex 网格行容器。

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

序号	名称及描述	类型	默认值
1	$behavior 修改默认网格样式。	关键词或列表	null
2	$width 行的最大宽度。	数字	$grid-row-width
3	$columns 设置此行的列数。	关键词或列表	null
4	$base 它在同一元素上调用混合宏两次时非常有用，因为它会创建重复的输出。	布尔值	true

使用混合宏创建 Flex 网格列。在父 Flex 行上使用 unstack 类，列可以拉伸到容器的整个宽度。

@include flex-grid-column($columns, $gutter);

序号	名称及描述	类型	默认值
1	$columns flex-grid-column() 函数用于获取可用值。	混合	Null
2	$gutter 创建列之间的间距	数字	$grid-column-gutter

序号

名称及描述

类型

默认值

$columns

flex-grid-column() 函数用于获取可用值。

混合

Null

$gutter

创建列之间的间距

数字

$grid-column-gutter

更改 Flex 网格列的顺序。布局中列号最小的列将首先显示。

@include flex-grid-order($order);

序号	名称及描述	类型	默认值
1	$order 应用序号。	数字	0

序号

名称及描述

类型

默认值

$order

应用序号。

数字

以下是 Flex 网格的函数：

计算 Flex 网格列的 flex 属性。它接受与基本 grid-column() 函数相同的值，以及以下参数：

flex-grid-column($columns)

序号	名称及描述	类型	默认值
1	$columns 设置特定列宽。	混合	null

序号

名称及描述

类型

默认值

$columns

设置特定列宽。

混合

null

foundation_flex_grid.htm

打印页面