Sass 导入

前言

• Sass 可以帮助我们减少 CSS 重复的代码，节省开发时间。

• 可以按照不同的属性来创建一些代码文件，如：变量定义的文件、颜色相关的文件、字体相关的文件等。

1、@import

• 类似 CSS，Sass 支持 @import 指令。@import 指令可以让我们导入其他文件等内容。

• CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但 Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。

• Sass @import 指令语法如下。

  @import filename;

• 导入后我们就可以在主文件中使用导入文件等变量。

• 包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。此外，也可以导入 CSS 文件。

• 创建一个 reset.scss 文件。

  html, body, ul, ol {
    margin: 0;
    padding: 0;
  }

• 在 standard.scss 文件中使用 @import 指令导入 reset.scss 文件。

  @import "reset";
  
  body {
    font-family: Helvetica, sans-serif;
    font-size: 18px;
    color: red;
  }

• 将以上代码转换为 CSS 代码，如下所示。

  html, body, ul, ol {
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: Helvetica, sans-serif;
    font-size: 18px;
    color: red;
  }

2、Partials

• 如果不希望将一个 Sass 的代码文件编译到一个 CSS 文件，可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。

• 但是，在导入语句中我们不需要添加下划线。

• Sass Partials 语法格式。

  _filename;

• 以下实例创建一个 _colors.scss 的文件，但是不会编译成 _colors.css 文件。

  $myPink: #EE82EE;
  $myBlue: #4169E1;
  $myGreen: #8FBC8F;

• 如果要导入该文件，则不需要使用下划线。

  @import "colors";
  
  body {
    font-family: Helvetica, sans-serif;
    font-size: 18px;
    color: $myBlue;
  }

• 注意：不要将带下划线与不带下划线的同名文件放置在同一个目录下，比如，_colors.scss 和 colors.scss 不能同时存在于同一个目录下，否则带下划线的文件将会被忽略。