mixin就相当于js中的函数,对一些样式进行了封装,减少代码的编写。
混合宏无法重载,参数可以设置默认值。
<template>
<div id="app">
<div></div>
<div></div>
<div></div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="scss">
//无参混合宏
@mixin app-border{
border: 1px solid red;
border-radius: 4px;
}
//带参混合宏
@mixin div-border($radius,$boder-size:2px){
border: $boder-size solid blue;
border-radius: $radius;
}
#app{
@include app-border;
height: 100px;
display: flex;
justify-content: space-around;
align-items: center;
div{
@include div-border(50%);
height: 50px;
width: 50px;
}
}
</style>
附上混合宏与集成、占位符的区别