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

迈不过友情╰ 2023-06-13 15:29 116阅读 0赞

###  混合指令：定义混合指令@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属性[混合指令][Link 1]（[定义混合指令 @mixin][_mixin]、[引用混合样式 @include][_include]）官方教程：[https://www.sass.hk/docs/][https_www.sass.hk_docs] ###

![20191118091723562.png][]

### 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属性[混合指令][Link 1]（传参）官方教程：[https://www.sass.hk/docs/][https_www.sass.hk_docs] ###

![20191119095422106.png][]

[Link 1]: https://www.sass.hk/docs/#9
[_mixin]: https://www.sass.hk/docs/#9-1
[_include]: https://www.sass.hk/docs/#9_2
[https_www.sass.hk_docs]: https://www.sass.hk/docs/
[20191118091723562.png]: https://img-blog.csdnimg.cn/20191118091723562.png
[20191119095422106.png]: https://img-blog.csdnimg.cn/20191119095422106.png