混合指令：定义混合指令@mixin以及引用混合指令@include;@mixin参数

 混合指令：定义混合指令@mixin以及引用混合指令@include

<template>
	<view class="content">
		定义混合指令@mixin以及引用混合指令@include
	</view>
</template>

<script>
	export default {}
</script>

<style lang="scss" scoped>
	@mixin large-text {
		font: {
			size: 20rpx;
			weight: 600;
			family: Arial;
		}

		border:1px solid #ff0000;
	}

	.content {
		@include large-text;
		padding: 100rpx;
	}
</style>

sacc属性混合指令（定义混合指令 @mixin、引用混合样式 @include）官方教程：https://www.sass.hk/docs/

 

mixin参数

1.一般形式的传参（一一对应的传进来）

<template>
	<view class="content">
		mixin参数 (Arguments)
	</view>
</template>

<script>
	export default {}
</script>

<style lang="scss" scoped>
	@mixin large-text($size, $weight, $color) {
		font: {
			size: $size;
			weight: $weight;
			family: Arial;
		}

		border:1px solid $color;
	}

	.content {
		@include large-text(20rpx, 600, #ff0000);
		padding: 100rpx;
	}
</style>

2.给传参设置默认值

<template>
	<view class="content">
		mixin参数 (Arguments)
	</view>
</template>

<script>
	export default {}
</script>

<style lang="scss" scoped>
	@mixin large-text($size, $weight:600, $color:#ff0000) {
		font: {
			size: $size;
			weight: $weight;
			family: Arial;
		}

		border:1px solid $color;
	}

	.content {
		@include large-text(20rpx);
		padding: 100rpx;
	}
</style>

3.关键字传参对比与1的传参形式一一对应，3的这种传参形式关键字传参就灵活的多了

<template>
	<view class="content">
		mixin参数 (Arguments)
	</view>
</template>

<script>
	export default {}
</script>

<style lang="scss" scoped>
	@mixin large-text($weight, $color, $size) {
		font: {
			size: $size;
			weight: $weight;
			family: Arial;
		}

		border:1px solid $color;
	}

	.content {
		@include large-text($size: 20rpx, $weight:600, $color:#ff0000);
		padding: 100rpx;
	}
</style>

sacc属性混合指令（传参）官方教程：https://www.sass.hk/docs/