SCSS中的@mixin(混入)

mixin(混入)

相当于创建了一个可接收参数的代码块 引入后代码块中的内容会自动放到引入位置

scss代码

//创建混入 @mixin 混入名(变量名:默认值){代码块}

@mixin theme($theme:DarkGray){
    background:$theme;
    box-shadow:0 0 1px rgba($theme,.25);
    color:#fff;
}

//引入混入 @include 混入名(变量名:值) 或 @include 混入名
.info{
    @include theme;
}
.alert{
    @include theme($theme:DarkRed);
}
.success{
    @include theme($thme:DarkGreen);
}

css代码

.info{
    background:DarkGray;
    box-shadow:0 0 1px rgba(DarkGray,.25);
    color:#fff;
}
.alert{
    background:DarkRed;
    box-shadow:0 0 1px rgba(DarkRed,.25);
    color:#fff;
}
.success{
    background:DarkGreen;
    box-shadow:0 0 1px rgba(DarkGreen,.25);
    color:#fff;
}