在 Sass 中，你可以使用 @import 指令导入其他 Sass 文件，这有助于将样式表拆分为更小的模块，提高代码的可维护性。以下是关于导入 Sass 文件的基本语法和示例：

1. 基本导入
// _variables.scss
$primary-color: #3498db;
$font-stack: 'Helvetica Neue', sans-serif;

// styles.scss
@import 'variables';

body {
  font: $font-stack;
  color: $primary-color;
}

在这个例子中，@import 'variables'; 导入了 _variables.scss 文件中的变量，使得在 styles.scss 中可以使用这些变量。

2. 导入多个文件
// _variables.scss
$primary-color: #3498db;
$font-stack: 'Helvetica Neue', sans-serif;

// _mixins.scss
@mixin rounded-corners {
  border-radius: 5px;
}

// styles.scss
@import 'variables';
@import 'mixins';

body {
  font: $font-stack;
  color: $primary-color;
  @include rounded-corners;
}

在这个例子中，通过 @import 导入了多个文件，包括变量和混合（mixin）。这样可以更灵活地组织代码。

3. 导入目录中的所有文件
// _reset.scss
body {
  margin: 0;
  padding: 0;
}

// _typography.scss
h1, h2, h3 {
  font-family: 'Helvetica Neue', sans-serif;
}

// styles.scss
@import 'reset';
@import 'typography';

在这个例子中，可以使用 @import 'reset'; 和 @import 'typography'; 导入目录中的所有 Sass 文件，而不需要分别列出每个文件。

要注意，导入文件时不需要包含文件的扩展名。如果文件名以 _ 开头，表示该文件是一个局部文件，只能通过 @import 导入，而不能单独编译成 CSS。

通过合理使用 @import，可以更好地组织和管理项目中的样式代码。然而，要注意不要过度使用导入，以避免生成过多的 HTTP 请求，影响性能。


转载请注明出处：http://www.zyzy.cn/article/detail/4329/sass