Sass的混合-@mixin,@include

1,無參數,有參數和帶默認值參數的@mixin聲明
sass文件內容:

//帶參數,默認50
@mixin opa($opa:50){
opacity: $opa / 100;
filter:alpha(opacity=$opa);
}
1
2
3
4
5
//mixin需要在調用之前聲明
.demo{
@include opa(10);
}
1
2
3
4
注意:
@mixin要在@include調用前聲明
如果@mixin聲明包含參數,則@include調用也必須傳參,否則會報錯
除非,以" 參數:默認值 "的方式聲明參數,在不傳參的情況下使用默認值
1
2
3
4
sass編譯后:

.demo {
opacity: 0.1;
filter: alpha(opacity=10); }
1
2
3
2,不固定參數的@mixin聲明
//參數不確定
@mixin shadow($shadow...){
box-shadow: $shadow;
}
1
2
3
4
sass編譯后:

.demo {
opacity: 0.1;
filter: alpha(opacity=10);
box-shadow: 0 0 10px red, 0 0 20px yellow; }
1
2
3
4
以上簡單舉例說明了sass混合功能的使用,包括:無參數,有參數,默認參數,參數不固定的情況