前言

本文主要记录了Sass @extend、mixin的基本用法，以及mixin和引入其他Sass文件区别。

代码复用

代码复用在开发项目和维护上尤为重要，在Sass中主要有两种复用方式：继承（@extend）和混入（mixin）;

继承（@extend）

@extend指令允许一个选择器，去继承另一个选择器从而简化了代码，但是它也有缺陷之处，首先是不够灵活，其次它还会将你不需要的其他地方具有相同类名的样式都继承过来。

用法

		.xxx{
		
		}
		.zzz{
			//继承xxx选择器样式
		    @extend .xxx;
		}

@extend 很好的体现了代码的复用。

混入（mixin）

@mixin指令也能提高代码的重复使用率并简化你的代码。

在Sass中定义mixin，可以复用代码块；

通过@mixin加名称的方式就可以定义一个mixin模块，在模块内你可以添加任何你想重复使用的样式。

使用@mixin指令，来调用mixin模块。

用法

	//定义mixin
	@mixin name {
		//准备复用的代码块
	}
	.xxx{
		//使用mixin
	    @include name;
	}

传参

混入（mixin）还可以接收和使用参数，使得它比@extend更加强大和灵活。

@content

@content的效果于vue的slot类似，通过@include引入mixin代码，将@include{}中代码替换掉@content；

混入（mixin）和引入其他Sass文件区别；

引入其他的Sass文件是对选择器进行复用；

混入（mixin）是对代码块的复用；

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！