scss引入其他scss文件

### 如何在 SCSS 文件中 `@import` 引入其他 SCSS 文件

#### 方法概述
为了在 SCSS 文件中引入其他的 SCSS 文件，可以利用 `@import` 指令来实现这一目标。此指令不仅能够加载并合并多个样式表的内容至单个 CSS 输出文件之中，而且还能使被导入文件中的变量、混合宏等功能生效于当前文档内[^1]。

#### 示例代码展示
假设存在两个独立的 SCSS 文件——_variables.scss 和 _mixins.scss，它们分别定义了一些全局使用的颜色变量以及常用的布局混入规则。现在希望在一个名为 main.scss 的主文件里调用这些资源：

/* _variables.scss */
$primary-color: #3498db;
$font-stack:    Helvetica, Arial, sans-serif;

/* _mixins.scss */
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

/* main.scss */
// 导入变量和混入规则
@import "variables";
@import "mixins";

body {
  font-family: $font-stack;
  background-color: $primary-color;
  
  nav {
    @include border-radius(5px);
  }
}

上述例子展示了如何通过相对路径指定要引入的目标文件名（无需扩展名），从而完成对所需功能模块的有效集成[^4]。

值得注意的是，在现代前端开发实践中，推荐采用更先进的构建工具链如 Webpack 或 Parcel 来处理依赖关系管理等问题；对于较新版本的 SASS 编译器，则建议探索使用 `@use` 及 `@forward` 替代传统的 `@import` 方式以获得更好的性能表现与命名空间控制能力。