Sass基礎學習No.5-Sass裡為單純合併樣式的複製機@extend

發表於 更新於 分類於 ，

@extend的使用時機

常常會有同樣的樣式要一直重複使用到，在CSS裡會盡量用合併樣式來一次性寫完，但是在後面好幾百行又出現了同樣的程式碼，這時候要嘛直接寫下來，要嘛回到好幾百行前把這個CSS選擇器加進去合併樣式裡。

使用方法

利用%合併樣式name，並寫下需要合併的樣式程式碼，之後需要用到時，就代入@extend %合併樣式name。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$font-title:'Arial Narrow'

%all-h1
    font-size: 48px
    background-color: $black
    font-family: $font-title

.header h1
    @extend %all-h1
    color: #0000ff

.content h1
    @extend %all-h1
    color: #000022

.main h1
    @extend %all-h1
    color: #000066
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*上面程式碼的CSS編譯結果*/
.main h1, .content h1, .header h1 {
  font-size: 48px;
  background-color: #000;
  font-family: "Arial Narrow";
}

.header h1 {
  color: #0000ff;
}

.content h1 {
  color: #000022;
}

.main h1 {
  color: #000066;
}

同樣擁有複製功能，@extend與@mixin的差別

@mixin的寫法，請參考[Sass基礎學習No.4]Sass裡個性化的複製機@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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/*@extend的CSS編譯結果*/
.main h1, .content h1, .header h1 {
  font-size: 48px;
  background-color: #000;
  font-family: "Arial Narrow";
}

.header h1 {
  color: #000;
}

.content h1 {
  color: #000;
}

.main h1 {
  color: #000;
}

/*/*@mixin的CSS編譯結果*/
.header h1 {
  font-size: 32px;
  background-color: red;
  font-family: "Arial Narrow";
  color: red;
}

.content h1 {
  font-size: 32px;
  background-color: red;
  font-family: "Arial Narrow";
  color: red;
}

.main h1 {
  font-size: 32px;
  background-color: red;
  font-family: "Arial Narrow";
  color: red;
}

差別是甚麼?

  • @extend會將擁有同樣樣式的CSS選擇器放在一起，把它們不同的部分分開寫，CSS編譯結果比較短。
  • @mixin會將所有CSS選擇器分開後，寫下各自的樣式，CSS編譯結果比較長。
  • @mixin可以有參數，特製每個CSS樣式，@extend不行。

如何抉擇使用@extend還是@mixin

樣式都固定不變的，不會需要用參數帶進去改變樣式的話，那就用@extend，程式碼會比較少些，如果需要特製同類型但細節不一樣的程式碼時(利用多個變數進行變化)，那就用@mixin。