Scss模块化管理

Sass-scss

1. @use

child::Scss use命令 导入模块

2. @forward

child::Scss forward命令 模块多合一

@import

@import算是一个比较简易的模块系统。

1. scss拓展了@import 的功能，允许其导入 scss或 sass文件。
   1. scss允许同时导入多个文件: “@import “rounded-corners”, “text-shadow”;`
2. 被导入的文件将合并编译到同一个 css文件中，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
3. 以下情况下，@import 仅作为普通的css语句，不会导入scss文件：
   1. 文件拓展名是 .css ；
   2. 文件名以 http:// 开头；
   3. 文件名是 url() ；
   4. @import包含媒体查询。
4. 导入文件也可以使用 #{} 插值语句（下面有讲，这里把它理解成js中模板字符串就行）动态导入，但不是通过变量动态导入 scss文件，只能作用于 css的 url() 导入方式

   $family: unquote("Droid+Sans");
   @import url("http://fonts.googleapis.com/css?family=#{$family}");

   编译成 @import url("http://fonts.googleapis.com/css?family=Droid+Sans");

1. 实例:

common.scss

$color:red;

index.scss

@import "common.scss";
.container {
    border-color: $color;
}

编译成

.container {
  border-color: red;
}

2. 嵌套@import

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用@import，其实，也可以将@import 嵌套进内层选择器或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中，存在变量作用域。

1. 实例:

common.scss

.example {
    color: red;
}

index.scss

#main {
    @import "example";
}

被编译成

#main .example {
    color: red;
}

注意：@import不能嵌套使用在控制指令或混入中（带有@符号的叫指令）。

导入后禁止编译

如果需要导入 scss或者 sass文件，但又不希望将其编译为 css，只需要在文件名前添加下划线，这样会告诉 scss不要编译这些文件。
注意：

1. 导入语句中却不需要添加下划线；
2. 不可以同时存在有下划线与没有下划线的同名文件
   1. 添加下划线的文件将会被忽略。

1. 实例:

_common.scss $color:red; index.scss

@import "common.scss";
.container {
    border-color: $color;
}

编译为

.container {
  border-color: red;
}

_common.scss文件不会编译成 _common.css 文件。