在以往有些網站性質會因為節慶的關係，
而會修改網頁樣式，
在傳統比較常見的做法，
一個網站會有兩隻CSS，
第一個CSS是網站全域樣式，譬如Layout、module、基本theme樣式。(all.css)
第二個CSS則是其他的theme樣式，來去覆蓋第一個的CSS的theme樣式。(theme1.css、theme2.css)

但是這樣子的做法會有一些缺點：
1.會增加CSS檔案請求數(二個CSS)
2.因為是利用CSS覆蓋特性來設計，所以會造成CSS量也會變得比較多。

或許有人會想，
怎麼不直接改all.css就好？
原因自然是因為不好修改嘍，
假設你的all.css有三千行好了，
你要修改的樣式位置在其中的30處，
這樣要修改你就必須從一堆程式碼找出那30行出來，
相對來說修改上自然就很不方便。
所以再多一個theme.css把樣式都抽取出來，
這樣修改上就集中並輕鬆多了。

而且之後你有第二種第三種樣式的話，
就拿theme.css複製再做其他樣式也方便許多。

那麼接著我們就進入正題吧，
究竟該如何用Sass nth()、index()來設計多款網頁樣式出來。

nth()

變數並沒有說只能設定一個而已，
實際上來說，可以設定多個也沒關係，
譬如說像這樣子：

$style: #ffffff
$text-color: #ffffff,orange,yellow
//逗號可加或不加都可以,如果是字串的話要記得在外面包一個單雙引號

如果今天我要使用$text-color的第二種樣式的話，
就可以用nth把他引入出來，
寫法如下：

$text-color: #ffffff,orange,yellow
.content
  color:nth($text-color,2)
            //引入變數,第幾個

透過這樣子，產生出來的code的顏色就會變成第二個orange橘色。
nth()你可以想像成提取變數裡面第幾個樣式，
但是如果要做網站樣式管理的話，
單單這樣子還是不夠的，
如果你要換版型的話，豈不是要把所有有用到nth的數字位置都改掉？
而且其他接手的人也會不曉得1、2、3各代表什麼版型的樣式，
有30個地方有用到nth()的地方，你就必須一一手動去把數字1改成2，
這樣子還是不夠方便，
所以接下來我們繼續講到index()的做法。

index()

index()的用法，
我們直接來看code的吧：

$site: coffee,baseball,dvd
.content
  color:index($site,dvd)
            //引入變數,變數名稱

產生出來的code就會變成

.content{
  color: 3;
}

簡單的說，
index的其中一種做法可以拿來算你所選擇的變數排序，
像上面的code我選擇了index($site,dvd)，
因為dvd在變數第三個位置，
所以編譯出來就會顯示「3」。

透過nth()與index()結合方式，
我設計了下述程式碼來規劃多種版型樣式：

$sites:coffee,cart,cloth,tea,child   //網站類型
$text-color:red,orange,yellow,green,blue //文字顏色
$bg:#fff,#000,#000,gray,#fff  //背景顏色
$style: index($sites,coffee)  //選擇coffee後 = $style:1
.box
  background: nth($bg,$style)
  color: nth($text-color,$style)

關鍵的設計在於第四行$style的設計，
今天我選擇了coffee的樣式後，
由於$style等於1，所以我後面寫的nth自動都會撈對應的第一種網頁樣式，
這樣的設計流程在於:

1.以後有新的版型，只要修改/引入一隻CSS，降低CSS請求數外，CSS量也變小了。
2.如果要再新增網頁版型，就再後面繼續寫逗號加上變數即可。

Sass除了nth()、index()外，
其實還有each、if、for、function的做法，
透過這些Sass功能，
你就可以去設計一個專屬於你自己的CSS framework，
希望藉由這樣拋磚引玉讓大家也可以開始思考這個方向，
另也附上流程影片提供各位參考學習^_^