Susy 2 中重要的混合宏和函數(shù)

在使用 Susy 2 創(chuàng)建柵格前，讓我們先來了解一些非常重要的混合宏和函數(shù)。如果你理解了這些，那么就一定可以使用 Susy 來創(chuàng)建任何任何柵格。

container 混合宏

要想運(yùn)用 Susy 魔幻般的計(jì)算力量，第一件需要做的事就是定義?container。

// The Container Mixin 
@include container( [<length>] );
// Note: Optional arguments are enclosed in []

container?混合宏擁有一個(gè)可選的長(zhǎng)度參數(shù)，用來設(shè)置最外層容器的最大寬度。如果該參數(shù)缺失，默認(rèn)使用?max-width:100%來代替。

如果你要使用固定寬度的柵格布局，那么可以使用 Susy 自動(dòng)計(jì)算最大寬度。

為了保證 Susy 的有效計(jì)算，請(qǐng)將這個(gè)參數(shù)保持空缺：

@include container;

Span (Mixin)

spay 混合宏是 Susy 進(jìn)行布局的核心元素，它讓柵格表現(xiàn)的極其靈活。

我通常按照 Susy 的官方方式實(shí)現(xiàn)自己的布局：

@include span( <width> [<wide / wider>] of <layout> [<last>] ); 

如果使用過 Susy 1，那么就會(huì)發(fā)現(xiàn)它非常類似?span-column?混合宏，兩者只有極少的差異。

下面我來詳細(xì)解釋下其中的參數(shù)：

• <width>?表示該元素布局的列數(shù)。
• [<wide / wider>]?是一個(gè)可選參數(shù)，允許你擴(kuò)展當(dāng)前的列寬，以增加一邊或兩邊的間距。
• <layout>?是容器的上下文環(huán)境，需要其他定義當(dāng)前布局的可選參數(shù)配合使用（上下文環(huán)境表示的是父級(jí)容器的列數(shù)）。
• [<last>]?是一個(gè)可選參數(shù)，用來通知 Susy 該元素為一行的最后一個(gè)元素。

下面是一個(gè)具體的例子：

// This has a width of 3 columns + 1 gutter, out of 9 columns and is supposed to be the last item within the context. 
.some-selector {
  @include span(3 wide of 9 last); 
}

Span (Function)

span?函數(shù)非常類似?span?混合宏，唯一不同的一點(diǎn)在于該函數(shù)只返回元素的寬度。在這個(gè)函數(shù)中只能使用?<width>,<wide/ wider>?和?<layout>?參數(shù)。

// This has a width of 3 columns out of 9 columns
.some-selector {
  width: span(3 of 9);
}

使用?span?函數(shù)，讓所有的工作輕松多了，無需再去記憶各種外邊距內(nèi)邊距之類的細(xì)節(jié)問題。使用它，你就能得到恰當(dāng)?shù)膶挾取?/p>

// This has a padding of 1 column out of 9 columns 
.some-selector {
  padding-left: span(1 of 9); 
}

Gutter 函數(shù)

gutter?函數(shù)只有一個(gè)參數(shù)——?context（上下文環(huán)境）。

// This outputs margin that equals to 1 gutter width in a 9 column layout
.some-selector {
  margin-right: gutter(9); 
}

上述就是使用 Susy 2 必須要掌握的核心功能。