当前位置:首页 > 编程笔记 > 正文
已解决

【css】sass中的模块化

来自网友在路上 167867提问 提问时间:2023-11-06 14:56:00阅读次数: 67

最佳答案 问答题库678位专家为你答疑解惑

传统用法

@import

@import "aaa.scss"
@import "bbb.scss"
运行时
编译时出现的问题:混淆,污染,无私有

推荐用法

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

  1. 使用@use就相当于解决了混淆
@use "aaa.scss"
@use "bbb.scss"
  1. 使用命名空间解决了污染问题
使用@use会默认给每一个模块加上一个命名空间,命名空间的名字跟模块的文件名是一样的,可以通过以下方法修改默认的命名空间名
@use "aaa.scss" as "newName"
@use "bbb.scss"
.test{color:newName.$color;background:bbb.$color;
}
  1. 定义私有变量解决私有问题
    aaa.scss文件
在aaa.scss设置私有变量,需要在开头使用下划线
@_noChange:red;

踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下

📃 个人主页: \textcolor{green}{个人主页:} 个人主页: 沉默小管

📃 个人网站: \textcolor{green}{个人网站:} 个人网站: 沉默小管

📃 个人导航网站: \textcolor{green}{个人导航网站:} 个人导航网站: 沉默小管导航网

📃 我的开源项目: \textcolor{green}{我的开源项目:} 我的开源项目: vueCms.cn

🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

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

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"【css】sass中的模块化":http://eshow365.cn/6-33718-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!