SASS&&SCSS（SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss）

sass和scss的区别 参考文章：https://blog.csdn.net/weixin_51608296/article/details/117155280

一、SASS的模块化

@import

1. 运行时 @import url(‘index.css’)
2. 编译时执行 @import ‘/index.css’
   缺陷:
   • 与运行时的引入混淆
   • 污染 导入俩个模块，都有统一变量名时，容易污染变量名，后导入的文件中的变量名会覆盖前面文件中的变量名的值】
   • 没有私有性 一但导入文件后，文件中的所有变量都可以被使用，不需要导出

@use sass中的模块化指令

使用： @use '/index.scss'
这样导入后，其中的变量具有命名空间  例如：如果我想用使用index.scss中的$cololr变量，我应该这样使用
 background： index.$color   解决了使用@import导入后的污染问题

二、sass中的扩展和占位符

继承比起混合 @mixin

使用@mixin 编译后，重复代码太多，增大代码体积

使用@extend后可以把相同代码合并，优化代码，减小打包后的代码体积

.tip{
	margin: 10px;
	font-size: 12px;	
}
.tip-wanning{
	@extend .tip;
	color: orange;
}

编译后的结果为

.tip .tip-wanning{
	margin: 10px;
	font-size: 12px;	
}
.tip-wanning{
	color: orange;
}

编译前

编译后

抽象父类 父类的存在只是为了提取公共代码，最终的结果中不能使用父类

使用占位符 % 写公共样式，该样式不会生成到最终的编译结果中。可以减少无效代码的生成

%tip{
	margin: 10px;
	font-size: 12px;	
}
.tip.wanning{
	@extend %tip;
	color: orange;
}

编译后的结果为

.tip-wanning{
	margin: 10px;
	font-size: 12px;
	color: orange;
}