sass的导入@import

视频

嵌套进阶
变量进阶
sass导入
sass继承

css3的@import，在css样式表之中使用绝对或相对地址指定导入的外部样式表文件。
如：@import url("style/index.css");

css3中的@import可能会造成延迟加载，有的地方没有样式。

sass @import解决了这个问题，它能将多个scss合并为一个。
如：@import "style/index.scss"

如下a.scss中引入了b.scss:
a.scss:

$width : 100px;

.before {
  width: $width;
}

@import "b";

.after {
  width: $width;
}

.container {
  width: $width;
  height: $height;
  border: 1px solid;
}

b.scss:

$width : 200px;
$height : 200px

自动生成的a.css:

.before {
  width: 100px; }

.after {
  width: 200px; }

.container {
  width: 200px;
  height: 200px;
  border: 1px solid; }

/*# sourceMappingURL=a.css.map */

默认值：$width : 200px !default

用法：可以在被引入的文件中定义默认值，主文件@import这个文件后，如果主文件中变量有定义，就不会被覆盖。