什麼時候該用 @mixin ?
@mixin 主要有兩個用途：
- 幫你把會重複用到的樣式統一做一個接口，方便後續維護。
- 還有可以帶入變數的特性，讓具重複性的代碼，可以更彈性的使用。
但是他並不是沒有成本，當你在高度重複的代碼裡使用 @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
| @mixin title{
font-size:18px;
line-height:1.8;
border-bottom: 3px solid #000;
border-left:3px solid #000;
padding: 0 0 0 30px;
}
.sidebar h2{
@include title;
}
.content h4{
@include title;
}
.main h3{
@include title;
}
//編譯出來的CSS
.sidebar h2{
font-size:18px;
line-height:1.8;
border-bottom: 3px solid #000;
border-left:3px solid #000;
padding: 0 0 0 30px;
}
.content h4{
font-size:18px;
line-height:1.8;
border-bottom: 3px solid #000;
border-left:3px solid #000;
padding: 0 0 0 30px;
}
.main h3{
font-size:18px;
line-height:1.8;
border-bottom: 3px solid #000;
border-left:3px solid #000;
padding: 0 0 0 30px;
}
|
那有什麼方法可以既方便維護又不會編譯出來一大串重複的程式碼呢？
這時候就輪到 @extend 出場了。
@extend
@extend 主要是把重複樣式的 selector 集合在一起，就可以達到既方便維護又節省程式碼的效果：
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
| // %title是css會被堆疊的位置
%title{
font-size:18px;
line-height:1.8;
border-bottom: 3px solid #000;
border-left:3px solid #000;
padding: 0 0 0 30px;
}
.sidebar h2{
@extend %title
}
.content h4{
@extend %title
}
.main h3{
@extend %title
}
//編譯出來的CSS
.sidebar h2,.content h4,.main h3{
font-size:18px;
line-height:1.8;
border-bottom: 3px solid #000;
border-left:3px solid #000;
padding: 0 0 0 30px;
}
|
Comments