scss代码:
/*一般mixin*/
@mixin helloMixin {
display: inline-block;
padding: 20px;
font: {
size: 20px;
weight: 500;
}
color: red;
}
/*嵌套mixin*/
@mixin helloMixin2 {
padding: 10px;
@include helloMixin;
background-color: red;
}
/*参数mixin*/
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style:dashed;
};
}
.div {
width: 100px;
@include helloMixin2;
}
.div {
@include sexy-border(blue,2px);
}
编译后得到的css代码:
@charset "UTF-8";
/*一般mixin*/
/*嵌套mixin*/
/*参数mixin*/
.div {
width: 100px;
padding: 10px;
display: inline-block;
padding: 20px;
font-size: 20px;
font-weight: 500;
color: red;
background-color: red;
}
.div {
border-color: blue;
border-width: 2px;
border-style: dashed;
}
如果你感觉这篇文章对你有帮助,请点赞收藏
你的支持是我最大的动力
