sass模块化

在使用css时，导入一个css文件可以使用@import url('xxxx')来导入另一个css文件
在sass中，@import url('xxxx')报错，但是可以使用@import 'xxxx'来进行导入
- @import url('xxxx')主要用于css，然而css属于运行时
- sass它是属于编译时的，因为它是要编译成css后，才在项目中参与运行的
但是使用@import 'xxxx'方式来导入呢，可能造成一定的问题
- 1. 污染
```
$color:#fff;
```
```
$color:#000;
```
```
@import 'a.scss'
@import 'b.scss'
.a{
    color:$color
  }
```
  编译结果：
```
.a {
  color: #000;
}
```
  从编译结果可以看出，b.scss中的变量污染了a.scss中的变量
- 1. 混淆：现在@import主要承担scc和sass的语法规则，无法一眼就分辨出谁是谁。
- 1. 没有私有的内部变量：从上面的 ‘污染’ 的例子来看，在里面定义了什么，在外部任然可以直接使用。

官方推荐使用 @use 'xxx'来进行模块的导入

毋庸置疑，使用这个方式，肯定能解决以上三个问题

使用了@use之后默认会给每个模块开辟一个命名空间，看下面的例子：默认情况下，命名空间的名称既文件名称

@mixin flex($layout) {
   display: flex;
   align-items: $layout;
   justify-content: $layout;
   @content;
}
$color: #000;

    @use "common.scss";
    @use "var.scss";
    .layout1 {
      @include common.flex(center);
      color: common.$color;
      font-size: 12px;
    }
    .layout2 {
      @include common.flex(center);
      color: var.$color;
      font-size: 12px;
    }

具名命名空间@use 'common.scss' as c, as 后就是定义的命名空间名称

        @use "common.scss" as c;
        @use "var.scss" as v;
        .layout1 {
          @include c.flex(center);
          color: c.$color;
          font-size: 12px;
        }
        .layout2 {
          @include c.flex(center);
          color: v.$color;
          font-size: 12px;
        }

私有变量$-a:15px; || $_a:15px;

// 定义两个私有变量并使用
$-w:100px;
$_h:200px;
.header{
   width: $-w;
   height: $_h;
}
// 这边正常编译
/* .header {
  width: 100px;
  height: 200px;
} */

@use "common.scss" as c;
.text{
   width: c.$-w;  // 报错 ！！  Private members can't be accessed from outside their modules.
}

【sass模块化】@use的基本使用

sass模块化

官方推荐使用 @use 'xxx'来进行模块的导入