為了不要使 CSS 太過龐大，遇到相同樣式時，都會將其合併起來，但這會遇到一個問題，如果開發到後面程式碼太多，遇到相同樣式要合併時又得拉到前面找出來合併
1
2
3
4
5
6
|
.header h1, .content h1, .footer h1 {...}
.content h1 {...}
.footer h1 {...}
|
@extend 基本運用
透過 @extend 可以將其他的 class 拉進來合併延伸使用
1
2
3
4
5
6
7
8
9
10
|
.box1 {color: red}
.box2 {
width: 100px;
@extend .box1;
}
.box1, .box2 {color: red}
.box2 {width: 100px}
|
須注意合併樣式的先後順序，以下情況 .box2 的 border-color 樣式就會被覆蓋
1
2
3
4
5
6
7
8
9
10
|
.box2 {
@extend .box1 ;
border-color: blue;
}
.box1 {border: 1px solid red}
/* in css */
.box2 {border-color: blue;}
.box1, .box2 {border: 1px solid red}
|
% 專門被呼叫的樣式
可以用 % 建立一個樣式，只有使用 @extend 呼叫時才會作用，本身並不會被 Sass 編譯成 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
%all-h1 {color: red}
.header {
width: 100px;
@extend %all-h1
};
.footer {
width: 200px;
@extend %all-h1
};
.header, .footer {color: red};
.header {width: 100px};
.footer {width: 200px}
|
@extend 與 @mixin 的差異