萨斯 |跨多个文件使用变量

在 SASS 中跨多个文件使用变量是由 SASS 的 @import 规则执行的。

@import 规则，它导入 Sass 和 CSS 样式表以提供变量、@mixins 和函数。这样将所有样式表组合在一起以编译 css。

它还导入 URL，例如 Bootstrap 等框架。

@import 在未来的更新中不再被鼓励，所以更喜欢@use 规则。

句法：

/* importing name and file path is /_file.scss */
@import 'file';

方法一：导入多个 Sass 部分

要使用 @import 导入多个 sass 部分，通过添加 @import 后跟引号内的第一个文件名，然后是逗号（，），然后是引号内的第二个文件名，以分号结尾

/* importing name and file path is /_file1.scss and  /_file2.scss */
@import 'file1', 'file2' ;

示例 1：下面的示例说明了上述方法。
SASS 文件

/* _colors.scss */
$primary:#00ff40;
$secondary: #f44336;
$tretiary:#03a9f4;
$tera: #ffeb3b;
$dark:#000000;
$grey:#919191;
$light:#dddddd;
$white:#FFFFFF;
  
/* _std.scss */
html,
body,
ul,
ol {
    margin: 0;
    padding: 0;
}
body {
        color:$grey;
    font-family: Helvetica, sans-serif;
    background-image: url('/img/backimg.jpg');
    background-repeat: no-repeat;
      background-attachment: fixed;
  background-position: center;
  background-size: cover;
    }
  
/*_section.scss*/
  
div{
  
    padding: {
        top: 20px;
        left: 10px;
        right: 10px;
        bottom: 20px;
        }
    h1{
          
        color: $secondary !important;
        align-items: center;
          
    }
  }
/* style.scss*/
@import 'colors';
@import 'std', 'section';

编译后的 CSS 文件： style.css

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

body {
  color: #919191;
  font-family: Helvetica, sans-serif;
  background-image: url("/img/backimg.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

div {
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
}

div h1 {
  color: #f44336 !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

方法 2：导入纯 CSS

通过以下方式使用 @import 加载纯 CSS：
@import 后跟 CSS 文件的路径，扩展名为 .css，用双引号括起来。
如果是 URL 路径，则在 url(" ") 中指定完整的 URL；

/* importing plain CSS*/
@import "mytheme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
@import url(mytheme);
@import "landscape" screen and (orientation: landscape);

示例 2：下面的示例说明了上述方法。
SASS 文件： style.scss

@mixin google-font($family) {
  @import url("http://fonts.googleapis.com/css?family=#{$family}");
}
  
@include google-font("Serif Sans");

编译后的 CSS 文件： style.css

@import url("http://fonts.googleapis.com/css?family=Serif Sans");

方法三：导入模块并配置模块
- 通过以下方式使用 @import 加载模块和配置模块：
- 为了使这更容易。Sass 还支持仅导入文件，如下所示：
- _filename.scss 被导入只导入文件
  文件名.import.scss 作为
```
@forward "filename" as filename-*;
```
- 如果@use 不推荐使用此方法。
- 要配置模块，通过 @import 通过定义与该模块的初始加载相关的全局变量来加载模块。
示例 3：
下面的示例说明了上述方法。
SASS 文件
```
/*_libray.scss */
  
$purple:Purple;
$white:white;
button{
     color:$white;
     border-color:$purple;
     background-color:$purple;
     padding :10px;
}
  
/* _library.import.scss */
  
@forward 'library' as lib-*;
  
/* style.sass  */
  
$lib-color: indigo;
@import "library";
```
编译后的 CSS 文件：style.css
```
button{
     color: white;
     border-color:indigo;
     background-color:indigo;
     padding :10px;
}
```

参考： https://sass-lang.com/documentation/at-rules/import