Sass 导入

Sass 使 CSS代码保持DRY（也就是不要重复），编写代码的一种方式是将相关的代码保存在单独的文件中，咱们能够建立带有CSS片断的小文件，以包含在其余Sass文件中，好比：重置文件、变量、颜色、字体或者是字体大小等等。

导入文件

与CSS同样，Sass也支持 @import 指令，它容许咱们将一个文件的内容包含在另外一个文件中，可是因为性能问题，CSS指令有一个缺点是咱们每一次调用都会建立一个额外的HTTP请求，可是Sass的@import指令将文件包含在CSS中，所以它每次在运行时不须要额外的HTTP调用。

Sass 导入语法：

@import filname;

注意：不须要指定文件扩展名，Sass会自动默认后缀名.scss或.sass文件。使用@import指令导入文件，咱们能够定义任何变量或混合，导入任意数量的文件。

Sass 扩展了 @import 的功能，容许它能够导入 SCSS 或者是 Sass 文件，被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令均可以在导入的文件中使用。

Sass 可使结构清晰化，减小了代码的重复编写，加强了代码的可读性，可是当代码量比较大时，就会出现一些问题，咱们须要拆开多个样式文件，css 和 sass 都有 @import 规则，二者的区别在于：前者运行@import 时须要加载外部 css ，这样一来容易使得网页加载速度变慢，而 sass 会直接在当时就会马上加载外部文件，更加方便快速。

Sass部分

默认状况下，Sass直接传输全部.scss文件，可是当咱们想要导入一个文件时，不须要直接将该文件转译。Sass有一种机制：若是文件名如下划线开头，Sass将不会对其进行转换，这样命名的文件在sass中称为部分文件。

一个部分Sass文件用一个前导下划线命名，部分语法：

_filename;

默认变量值

Sass 的同一变量若是屡次声明，那么后面的样式就会覆盖前面的样式，咱们可使用 !default 的方式，来将某同样式声明为默认公共样式，当导入文件对这一变量有赋值时，那么将它赋值，不然就为默认值。

嵌套导入

跟原生的 css 不一样，sass 容许 @import 命令写在 css 规则内。这种导入方式下，生成对应的 css 文件时，局部文件会被直接插入到 css 规则内导入它的地方。

原生导入

sass 一般会在 @import处以 sass 格式导入文件，也能够兼容 css，当如下三种状况出现时，会以原生的方式导入，这会形成浏览器的额外下载：

• 文件后缀是 .css
• 被导入的文件是一个 url 地址
• 被导入的文件是 url() 的值