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

列印頁面