Hazel Wu | 22'mm

前端工程師一定要會的:Sass Mixin神器

2018-01-29

Sass Mixin 神器,學會 Mixin 可以讓你在開發上的速度加快許多,快來看看如何使用吧

Sass Mixin 主要功能

Sass Mixin 主要功能:省去重複撰寫相同 CSS 的時間

  • 降低Pseudo(偽)元素撰寫時的重複性
  • 重用群組的 CSS,像是prefix,用@include加入群組
  • 透過@include使用參數

示範SASS運用

情境一

當你在開發時設計.introduce Class時,結果設計師跟你說:這個背景顏色好醜,我們需要改顏色、整體網站都要更改一下,天啊真是晴天霹靂!這樣改要整個大修耶,別怕別怕!還有Mixin來幫你大幅節省時間!

1
2
3
4
5
6
$font-size: 14px
@mixin bg
background: #000
font-size: $font-size
.header
+bg

SASS轉譯成CSS後,原始碼會變這樣

1
2
3
4
.header {
background: #000;
font-size: 14px;
}

是不是快多了呢!!!
寫法:@mixin 命名名稱,需要載入的話就是用「+」來載入mixin名稱

情境二

設計師說:背景顏色要隨著網站活動變更,整體網站顏色可能會每隔三四個月都要改一次,你會傻傻的一個一個找header改嗎?當然不!拿起我們的秘密武器Mixin吧
在Mixin裡建立變數

1
2
3
4
5
6
7
8
9
10
11
$font-size: 13px
$linkcolor: #d6b161
$textcolor: #eee
// 在Mixin裡建立變數,並帶入
@mixin bg($bgcolor)
background: $bgcolor
font-size: $font-size
.header
+bg($linkcolor)
.content
+bg($textcolor)

SASS轉譯成CSS後,原始碼會變這樣

1
2
3
4
5
6
7
8
.header {
background: #d6b161;
font-size: 13px;
}
.content {
background: white;
font-size: 13px;
}

這樣我們可以直接在帶入變數,隨時更改顏色!超方便!

  • 情境三
    設計師:「我們再來大改吧!包含RWD也要一起動哦」
    前端工程師:「天啊!我今晚又無法準時下班啦」

關於Responsive Web Design

RWD的@media 動則就是寫上千行,想辦法從min 768px裡找出要改的樣式,是件非常超級麻煩的事,一樣來用Mixin來大量減輕負擔吧

  • 傳統寫法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@media all and (min-width: 980px) {
.box1 {
margin: 50px;
}
.box2 {
margin: 30px;
}
}
@media all and (max-width: 768px) {
.box1 {
margin: 20px;
}
.box2 {
margin: 15px;
}
}
@media all and (min-width: 996px) and (max-width: 1200px) {
.box1 {
margin: 100px;
}
.box2 {
margin: 75px;
}
}

是的,我以前就是這樣寫,當我要找桌機版的.box1去修改時

  1. 要先找到@media min-width:996px and max-width: 1200px
  2. 再從裡面找到class box1

你會找老半天,有可能還會看錯改到平板模式的樣式
整體非常沒有效率也很耗時,你還會很傷眼力。
有個辦法:把三個@media查詢樣式時整合寫在一起,既好寫又好找!

1
2
3
4
5
6
7
8
9
10
11
.box1 {
@media all and (min-width: 980px) {
margin: 50px
}
@media all and (max-width: 768px) {
margin: 20px;
}
@media all and (min-width: 996px) and (max-width: 1200px) {
margin: 100px;
}
}

運用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
2
3
4
5
6
7
8
.box1 {
@media all and (min-width: 996px) {
margin: 20px;
}
@media all and (min-width: 768px) and (max-width: 995px) {
margin: 15px;
}
}

是不是少掉很多的程式碼!!!

顏色想要深一點?懶得挑色碼?這也沒問題

用darken(顏色, 深度)

1
2
3
4
$link: #d6b161;
.box1 {
background: darken($link, 15%)
}

Reference

閱讀量