@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>

本文介绍如何通过SCSS的@mixin指令实现背景图片样式的复用,提高前端开发效率。具体展示了如何定义和使用自定义@mixin,并提供了一个实际例子。
&spm=1001.2101.3001.5002&articleId=109054132&d=1&t=3&u=be01e8aae5bc41d8b6f05942ff5088ab)
8216

被折叠的 条评论
为什么被折叠?



