sass的模块导入

sass的模块化与css的模块化不同，css的模块化是把css分成多个css文件然后通过impot引入，css是会参与到运行当中，当运行时通过import导入。但是sass不是运行的时态是编译的时态。在运行之前分成多个模块但是编译之后就只会存在一个文件。

常用的模块导入两种方式

1. @import 

2. @use

第一种@import 一共有两种用法，编译时的用法与运行时的用法。运行时的用法与传统的css的模块引用一样。编译过后代码原封不动，因为这种写法写的就是css,因为css是运行时态所以编译后原封不动的生成。所以sass官网介绍时@import 就是css的扩展。

 我们再来看一下编译时的用法，首先编译我们就不使用url,直接就@impot + ‘文件名’。如下图所示，我们在common1这个文件定义的一个变量，然后去common文件去引入然后去使用。在编译过后我们能看见编译后的common文件没有了@import这一行且我们的使用的变量也自动匹配了颜色。所以在编译时，先当与直接把引入的文件的内容直接放到了引入文件里面。就与开始说的把两个文件编译过后最终只会形成一个文件。

 所以这@import就是这两种用法，运行时相当于纯css用法，编译时的用法会有问题所以sass官方不太推荐使用编译时的用法。大概就是三个方面的问题， 容易混淆   污染   私有性。不知道小伙伴们有没有想过，我们一旦使用大量的sass模块变量很容易就名称冲突，且并不知道其他模块使用了哪些名字兆成混淆。并且我们使用相同名字时后面的会替代前面值。 还有一个问题就是在我们写混合等情况下我定义的变量不想让别的模块使用内部自己使用没办法解决。

 所以模块化推荐使用@use,它完美的克服了上面的三个问题。@use导入的模块是有命名空间的，在我们使用某个模块里定义的属性时需要带上他们命名空间，不然就会报错。正确用法应该时color: common.$color

错误用法：

正确用法：

 如果出现不同文件夹相同文件名那我们应该怎么办呢？ @use './common' 与 @use './a/common'。当然sass肯定时帮我们考虑到这一点的。@use的命名空间是可以自定义的只用在后面更上@use '文件名' as 别名  (as 后面 加 * 代表不使用命名空间 )

 最后还有一个问题就是私有化，sass通过命名的方式去解决，非常简单我们只用在定义私有化变量时在变量前面加个_ 就代表这个变量是私有的。在前端代码中基本上私有变量命名都会加 _名称。

定义

使用

运行报错

使用时加上下划线也会报错

到这里就结束了，希望能帮助到你学习sass。