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 规则内导入它的地方。

电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

原生导入

sass 通常会在 @import处以 sass 格式导入文件，也可以兼容 css，当以下三种情况出现时，会以原生的方式导入，这会造成浏览器的额外下载：

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