iT邦幫忙

DAY 25
4

30天掌握Sass語法系列 第 21

30天掌握Sass語法 - (25) 透過index()與nth()來設計網站版本樣式控制管理

在以往有些網站性質會因為節慶的關係,
而會修改網頁樣式,
在傳統比較常見的做法,
一個網站會有兩隻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,
希望藉由這樣拋磚引玉讓大家也可以開始思考這個方向,
另也附上流程影片提供各位參考學習^_^


上一篇
30天掌握Sass語法 - (24) 淺談Sass協作流程分享
下一篇
30天掌握Sass語法 - (26) 如何讓你的CSS動畫更具動態效果
系列文
30天掌握Sass語法41

2 則留言

0
saintcharles
iT邦新手 4 級 ‧ 2014-04-17 12:51:30

您好,感謝您提供如此精美的影音教學,真的讓很多人受益匪淺,有個問題想請教一下,若依照此篇內容部分,是否可以透過jQuery取得或變更自定變數中的值呢?像如果我透過jq控制按下其他分頁按紐時,就可以透過改變變數的值再傳給index,若無法透過jq取值或賦值的話,是否有其他與jq搭配的建議方式呢,謝謝您的幫忙

0
兔子兔子
iT邦新手 5 級 ‧ 2020-08-25 11:38:12

網路上找找nth() index()似乎只能提供給sass使用
如果scss也要使用 請問需要調整什麼地方呢?
謝謝大大了

我要留言

立即登入留言