0
点赞
收藏
分享

微信扫一扫

Sass @extend、mixin代码复用

前言

本文主要记录了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)是对代码块的复用;

本文到此结束

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

举报

相关推荐

0 条评论