sass

Scss旅程(14) – function、mixin和import

今天要介紹的有當初某猫決定跳Scss坑的主要原因:function,雖然現在使用上是mixin比較常用……這是題外話了。

不過function和mixin我想應該也是許多人決定跳Scss這坑的原因吧!如果你還在猶豫要不要跳這個無比深的坑,可以先看看這篇介紹再決定也不遲。

1.mixin

mixin能讓我們將「想重複利用的sass/scss程式集合命名,甚至使用參數決定要使用哪一段sass/scss程式」。

範例一:

scss-mixin-ex1-1
[圖一]使用參數的mixin
編譯後:

scss-mixin-ex1-2
[圖二]範例一編譯後
範例二:

scss-mixin-ex2-1
[圖三]不使用參數的mixin
編譯後:

scss-mixin-ex2-2
[圖四]範例二編譯後
可以看到範例一集合了css裡常用的media-query,並使用參數決定要使用哪一種類型的media-query。當設定好後,只要在想使用的地方用@include將mixin載入,並注意將參數與設定值填入即可使用啦!

至於範例二則是集合了連結平時與滑鼠滑上時的樣式並重複使用,可以看到在mixin裡也可以用&符號,不如說只要是符合sass/scss格式的程式都可以放在mixin裡!

而因為範例二的「links」無須傳入參數,讓使用時沒有加上()編譯還是會通過的!雖說如此還是建議乖乖打上小括號吧。

要注意的是,如果mixin有設定「需傳入參數」或「需自訂內容(像範例一的@content)」就一定得乖乖輸入資料喔,只要少了一個,比如說範例一三個參數只用了兩個,這樣可是會出錯的(完全無法編譯)。

至於原本就不需傳入參數或設定值的就別輸入了,同樣只會編譯錯誤喔。

2.function

除了使用Sass提供的function之外,我們也可以使用自訂的function:

scss-function-ex1-1
[圖五]function範例與使用
編譯後:

scss-function-ex1-2
[圖六]範例三編譯
使用function要特別注意的有兩點,一是名稱部分要小心別跟Sass自帶的function名稱重複,二是function一定要使用@return回傳最後的運算結果!沒有這個「@return」編譯可是會直接失敗的。

3.import

最後介紹的「import」可是相當重要的一個東西呢哼哼。

當mixin或function越寫越多,甚至是scss越寫越多行覺得管理有點眼花,想拔幾行到別的scss檔案時,請問,要怎麼將拔出去的scss程式或在別的檔案裡的function載進主要的scss檔案裡呢?

這很簡單,交給import就對了!

這是mixin.scss:

scss-import-ex1-1
[圖七]mixin.scss
載進檔案並使用:

scss-import-ex1-2
[圖八]使用import
編譯後:

scss-import-ex1-3
[圖九]編譯後
請忽略雖然名字叫做「mixin.scss」但裡面卻有「function」這件事恩⋯⋯可以看到只要使用@import將檔案載入後就可以在主要的scss檔案裡使用自定義的function和mixin,這樣對於管理上來說是更加的便利呢。

目前Scss旅程到這邊告一段落啦,之後可能會再更新,也可能不會,也敬請期待下一個長篇主題~

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.