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>
附上混合宏與集成、佔位符的區別