sass的自定义函数功能(即@mixin和@include的运用)

本文介绍如何通过SCSS的@mixin指令实现背景图片样式的复用,提高前端开发效率。具体展示了如何定义和使用自定义@mixin,并提供了一个实际例子。

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

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值