@mixin指令允许我们定义一个可以在整个样式表中重复使用的样式即代码复用
首先定义一个公共的scss文件用来存放自定义方法
这里举的例子是一个背景图片样式的复用
/*背景图片样式的复用*/
@mixin bgImg($w,$h,$img,$size:contain){
display: inline-block;
width: $w;
height: $h;
background: url($img) no-repeat center;
background-size: $size;
}
这里可以传递变量和设置默认值
$w:后面的值即为默认值
然后在需要使用的页面中进行使用,使用之前不要忘了导入定义方法的文件
<div class="bgimg"></div>
<style lang="scss">
@import './assets/scss/mixin.scss';
.bgimg {
@include bgImg(960px, 510px, '/imgs/wallhaven.jpg')
}
</style>