Sass @import



  • 定义和使用

    Sass 使 CSS 代码保持 DRY(不要重复自己)。 编写 DRY 代码的一种方法是将相关代码保存在单独的文件中。
    您可以创建带有 CSS 片段的小文件,以包含在其他 Sass 文件中。 此类文件的示例可以是:重置文件,变量,颜色,字体,字体大小等。
  • Sass 导入文件

    CSS 一样,Sass 也支持 @import 指令。
    @import 指令允许您将一个文件的内容包含在另一个文件中。
    由于性能问题,CSS @import 指令有一个主要缺点; 每次您调用它时,都会创建一个额外的 HTTP 请求。 但是,Sass @import 指令将文件包含在 CSS 中;因此在运行时不需要额外的 HTTP 调用!
    Sass 导入语法:
    @import filename;
    
    
    提示:无需指定文件扩展名,Sass 会自动假定您的意思是 .sass.scss 文件。 您也可以导入 CSS 文件;@import 指令导入文件,然后可以在主文件中使用导入文件中定义的任何变量或混合。
    您可以根据需要在主文件中导入任意数量的文件:
    @import "variables";
    @import "colors";
    @import "reset";
    
    
    让我们看一个示例:假设我们有一个名为 “reset.scss” 的重置文件,如下所示:
    html,
    body,
    ul,
    ol {
      margin: 0;
      padding: 0;
    }
    
    
    现在我们想将 “reset.scss” 文件导入另一个名为 “standard.scss” 的文件。
    这是我们的操作方法:通常在文件顶部添加 @import 指令; 这样,其内容将具有全局作用:
    @import "reset";
    body {
      font-family: Helvetica, sans-serif;
      font-size: 18px;
      color: red;
    }
    
    
    因此,当编译 “standard.css” 文件时,CSS 将如下所示:
    html, body, ul, ol {
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: Helvetica, sans-serif;
      font-size: 18px;
      color: red;
    }
    
    
  • Sass 局部文件

    默认情况下,Sass 直接转译所有 .scss 文件。 但是,当您要导入文件时,不需要直接编译文件。
    Sass 为此提供了一种机制:如果您使用下划线开头文件名,则Sass 不会将其转译。 以这种方式命名的文件在 Sass 中称为 “局部文件”。
    因此,部分 Sass 文件的名称前面带有一个下划线:
    语法:
    _filename;
    
    
    以下示例显示了名为 “ _colors.scss” 的部分 Sass 文件(此文件不会直接移植到 “colors.css”):
    "_colors.scss":
    $myPink: #EE82EE;
    $myBlue: #4169E1;
    $myGreen: #8FBC8F;
    
    
    现在,如果导入部分文件,请省略下划线;Sass 知道应该导入文件 “ _colors.scss”:
    @import "colors";
    body {
      font-family: Helvetica, sans-serif;
      font-size: 18px;
      color: $myBlue;
    }