前端工程師一定要會的:Sass Mixin神器
Sass Mixin 神器,學會 Mixin 可以讓你在開發上的速度加快許多,快來看看如何使用吧
Sass Mixin 主要功能
Sass Mixin 主要功能:省去重複撰寫相同 CSS 的時間
- 降低Pseudo(偽)元素撰寫時的重複性
- 重用群組的 CSS,像是prefix,用
@include
加入群組 - 透過
@include
使用參數
示範SASS運用
情境一
當你在開發時設計.introduce Class時,結果設計師跟你說:這個背景顏色好醜,我們需要改顏色、整體網站都要更改一下,天啊真是晴天霹靂!這樣改要整個大修耶,別怕別怕!還有Mixin來幫你大幅節省時間!
1 |
|
SASS轉譯成CSS後,原始碼會變這樣
1 |
|
是不是快多了呢!!!
寫法:@mixin 命名名稱,需要載入的話就是用「+」來載入mixin名稱
情境二
設計師說:背景顏色要隨著網站活動變更,整體網站顏色可能會每隔三四個月都要改一次,你會傻傻的一個一個找header改嗎?當然不!拿起我們的秘密武器Mixin吧
在Mixin裡建立變數
1 |
|
SASS轉譯成CSS後,原始碼會變這樣
1 |
|
這樣我們可以直接在帶入變數,隨時更改顏色!超方便!
- 情境三
設計師:「我們再來大改吧!包含RWD也要一起動哦」
前端工程師:「天啊!我今晚又無法準時下班啦」
關於Responsive Web Design
RWD的@media 動則就是寫上千行,想辦法從min 768px裡找出要改的樣式,是件非常超級麻煩的事,一樣來用Mixin來大量減輕負擔吧
- 傳統寫法
1 |
|
是的,我以前就是這樣寫,當我要找桌機版的.box1去修改時
- 要先找到
@media min-width:996px and max-width: 1200px
- 再從裡面找到class box1
你會找老半天,有可能還會看錯改到平板模式的樣式
整體非常沒有效率也很耗時,你還會很傷眼力。
有個辦法:把三個@media查詢樣式時整合寫在一起,既好寫又好找!
1 |
|
運用Mixin和變數幫助你減輕眼力負擔
- 先針對media設變數,設定各裝置的寬度width
$pc-width: 996px;
$pad-width: 768pz;
- 新增一位叫「pc-width」的mixin,把@media公式代進去,會變更的值填入變數$pc-width
- 在.box1裡用@include來呼叫Mixin:pc-width程式碼呢就會長這樣
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23$pc-width: 996px;
$pad-width: 768px;
$pcs-width: 995px;
@mixin pc-width(){
@media all and (min-width: $pc-width) {
@content;
}
}
@mixin pad-width(){
@media all and (min-width: $pad-width) and (max-width: $pcs-width) {
@content;
}
}
// 代入後長這樣
.box1 {
@include pc-width {
margin: 20px;
}
@include pad-width {
margin: 15px;
}
}
1 |
|
是不是少掉很多的程式碼!!!
顏色想要深一點?懶得挑色碼?這也沒問題
用darken(顏色, 深度)
1 |
|
Reference
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!