mixin 简单使用

以：【vue 项目、scss 预处理】 为例，讲解下怎么用 mixin 简化 css 代码。

1. 写好公共样式

// mixins/waterfall.scss

 @mixin waterfall() {
     .waterfallContainer {
         padding: 0 12rpx;
         background-color: #f9f9f9;
     }
 }

2. 在页面中导入并使用公共样式

<style scoped lang="scss">

@import "@/mixins/waterfall.scss"; // 导入公共样式

.home {
	height: 100vh;
	
	@include waterfall(); // 使用公共样式
}
</style>