iT邦幫忙

DAY 6
5

30天掌握Sass語法系列 第 6

30天掌握Sass語法 - (6)利用Sass「@mixin」,讓你省去重複撰寫相同CSS樣式的時間

在以前寫CSS的時候,
我們時常會遇到以下的情境,

在開發多種CSS樣式時,會講第一次寫的程式碼複製貼上後,
再進行修改,但當樣式整個大修時(例:圓形改方形),
則又必須將所有CSS重新修正,頗不方便。

但使用Sass mixin的話,
上述的問題皆可解決,
同時還可傳入多個變數進去,
我們先來看下面的code:...
在以前寫CSS的時候,
我們時常會遇到以下的情境,

在開發多種CSS樣式時,會講第一次寫的程式碼複製貼上後,
再進行修改,但當樣式整個大修時(例:圓形改方形),
則又必須將所有CSS重新修正,頗不方便。

但使用Sass Mixin的話,
上述的問題皆可解決,
同時還可傳入多個變數進去,
我們先來看下面的code:

$font-size:13px
@mixin bg 
	background: #000
	font-size: $font-size
.header
	+bg

而產生出來就會變成如下:

.header {
  background: black;
  font-size: 13px;
}

前面必寫@mixin,後面的bg則是命名mixin名稱。
所以如果.header要載入的話,寫「+」後面接mixin名稱就可載入。
同時你也可載入外面的變數進來,當來你也可在裡面做加減乘除。

但今天假設背景顏色隨時會更動,
你也可以在mixin建立變數:

$font-size:13px
@mixin bg($bgcolor) 
	background: $bgcolor
	font-size: $font-size
.header
	+bg(#000)
.content
	+bg(#fff)

那產生出來的結果就會是:

.header{
  background: black;
  font-size: 13px;
}	
.content{
  background: white;
  font-size: 13px;
}

mixin專屬變數也可具有變數預設值,並載入多種變數:

@mixin bg($bgcolor:#000,$width:200px) 
	background: $bgcolor
	width: $width
.header
	+bg
.footer
	+bg(#ff0000,300px)

編譯出來結果為

.header {
  background: black;
  width: 200px;
}
.footer {
  background: red;
  width: 300px;
}

透過這種變數載入方式,
就可以將樣式給抽出來,
透過mixin來進行集中管理與設計,

附上範例影片,
任務為設定各種不同圓形樣式的元素:

Yes

1.01:00秒:寫完一個樣式後,開始設計mixin。
2.01:35秒:樣式抽離後,便可在設定各class的獨一background樣式
3.01:54秒:由於每個圓形大小不一樣,於是設定變數來產生出不同大小
4.02:40秒:Mixin也可載入外部變數
5.02:50秒:瀏覽原生CSS可觀察出其變化性。

透過上述範例就可了解@Mixin的強大之處,
他可以透過導入變數,
讓你保有一致性,
同時又可設計出具有靈活、彈性的樣式出來。

我們再來看一個範例:

Yes

1.00:00秒:table.style*2>tr*2>th{標題}+td{內容}是使用emmet的方式來打HTML,展開後就變成兩個class為 style1與style2的table出來,兩行兩欄式,左欄th右欄td。
2.01:20秒:Mixin也可載入一整個CSS片段碼
3.01:40秒:從操作流程可以看出如何設計CSS的樣式集中管理與獨特性設計。

--

相信從上範例,
大家也可了解Sass Mixin的迷人之處,
這東西同時也帶給網頁設計師一個新的設計思維,
來去思考如何設計出方便管理的CSS碼出來,
直到現在我也仍然在追尋更佳的Sass管理流程呢,
希望透過上述的設計範例能帶給大家對CSS的設計觀念能有所啟發,
一起加油嘍:D


上一篇
30天掌握Sass語法 - (5)利用Sass「@import」進行CSS檔案模組切割
下一篇
30天掌握Sass語法 - (7)利用Sass「@extend」,讓你無痛合併CSS樣式
系列文
30天掌握Sass語法41

1 則留言

0
cfyeric
iT邦新手 5 級 ‧ 2014-03-03 16:53:50

請問如何使用 + 來include mixin的設定?
我用的軟體是sublime text3 + Fire.app
依照教學使用 +bg(#000)會出現編譯錯誤的訊息
必須使用@include才可以

cfyeric iT邦新手 5 級‧ 2014-03-04 16:15:22 檢舉

不好意思我知道原因了 原來是我是使用SCSS所以只能用@include
SASS才可以用+

我要留言

立即登入留言