影片教學請點選下圖連結↓

以下文章同步於Github。

範例程式碼
susy2 - span Mixin、function

Span [mixin]
格式：span($span) { @content }
在之前幾個章節其實就使用了很多span的用法，
這次則是一次將他大部分的設定方式做個總整理。

首先是比較常見的設定：

.box{@include(2)} //佔兩欄寬
.box{@include(25%)} //也可以直接在裡面寫寬度

再來如果你的gutter-position是設定before或after的時候，
就必須用到last與first來清除掉最後一欄的margin gutter，
像是這樣：

$susy:(columns:12,gutter-position:after);
.sidebar{@include span(4)};
.main{@include span(8 last)} //為了讓.sidebar與.main滿版，所以就必須清掉.main的margin-right

如果你的子元素也有需要用到span的話，
這樣的寫法是錯的：

$susy:(columns:12,gutter-position:after);
.main{
    @include span(5);
    .left{
        @include span(2);
    }
}

原因是susy預設是fulid排版，
也就是以%數來設定寬度，
.main與.left都是以預設$susy的12欄來編譯span，
但這樣就不對了，
因為.left的父元素只有5欄，
所以你必須依照他父元素的設定來寫span才對。
在這裡susy2則提供了兩種寫法：

$susy:(columns:12,gutter-position:after);
.main{
    @include span(5);
    .left{
        @include span(2 of 5);  //利用of告知總欄數
    }
}

或者：

$susy:(columns:12,gutter-position:after);
.main{
    @include span(5){
        .left{
            @include span(2);  //因為包在.main的父元素span裡面，所以就不用寫of了
        }
    };
}

Nesting
如果你的gutter-position是用split、inside、inside-static的話，就不用使用last或first來消除gutter，
但會有個問題是像gutter-position:inside如果使用span()的話，
會產生出padding-left、padding-right的gutter值，
但有的時候我們希望在裡面繼續寫排版元素，
就會希望把該元素的padding給清除，
如果你有這樣的需求，
就可以使用nest。

$susy:(columns:12,gutter-position:inside);
.main{
    @include span(5 nest); //加上關鍵字 nest清除padding的gutter
    .left{
        @include span(2);       
    }
}

Location
如果你的span使用到isolation排版方式的話，
那就可以透過at定位到第幾欄：

//總共佔三欄，定位在第二欄的位置
.index { @include span(isolate 3 at 2); }
narrow, wide, and wider

這三個值代表著你希望span編譯出來的寬度是多少，
narrow是1column的寬度，
wide是1column+1gutter的寬度，
wider是1column+2gutter的寬度，
寫法如下：

// grid span
.narrow { @include span(2); } 
.wide { @include span(2 wide); }
.wider { @include span(2 wider); }

//編譯出來的CSS
.narrow { width: 22.5%; }
.wide { width: 25%; }
.wider { width: 27.5%; }

但這個東西我比較常用span提供的function來使用，
例如：

.box{
    @include span(1);
    margin-left:span(1 wide);
}

這樣子編譯出來的CSS就會margin-left推1column+1gutter的寬度。

總結
各位可以看出span的用法非常的多元，
如果你是初次使用susy2，
建議至少要了解at、of、last的用法，
在設計上才比較得心應手，
等到摸熟以後再去玩些進階的$span設定。