【css】sass中的模块化

传统用法

@import

@import "aaa.scss"
@import "bbb.scss"
运行时
编译时出现的问题:
	混淆，污染，无私有
1
2
3
4
5

推荐用法

@use
可以解决混淆，污染，无私有的问题

1. 使用@use就相当于解决了混淆

@use "aaa.scss"
@use "bbb.scss"
1
2

2. 使用命名空间解决了污染问题

使用@use会默认给每一个模块加上一个命名空间，命名空间的名字跟模块的文件名是一样的，可以通过以下方法修改默认的命名空间名
@use "aaa.scss" as "newName"
@use "bbb.scss"
.test{
	color:newName.$color;
	background:bbb.$color;
}
1
2
3
4
5
6
7

3. 定义私有变量解决私有问题
   aaa.scss文件

在aaa.scss设置私有变量，需要在开头使用下划线
@_noChange:red;
1
2

✨$踩坑不易，还希望各位大佬支持一下$

📃 $个人主页：$ 沉默小管

📃 $个人网站：$ 沉默小管

📃 $个人导航网站：$ 沉默小管导航网

📃 $我的开源项目：$ vueCms.cn

🔥 $技术交流QQ群：837051545$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教