第三节：SASS 导入@import

SASS 的艺术：掌握 @import 的高级用法

在当今的前端开发领域，SASS 作为一种强大的 CSS 预处理器，已经成为了许多开发者提升工作效率的必备工具。本文将深入探讨 SASS 中的 @import 指令，带你了解如何高效地组织和管理样式文件，以及如何利用 @import 实现模块化编程。

@import 的基础与进阶

1. 基本用法

SASS 中的 @import 指令允许你导入 SCSS 或 Sass 文件，这些文件将被合并编译成单个 CSS 文件。这意味着你可以将变量、混合指令 (mixin) 等定义在单独的文件中，并在其他文件中复用。

示例：导入变量文件

// public.scss
$font-base-color: #333;
// index.scss
@import "public";
$color: #666;
.container {
    border-color: $color;
    color: $font-base-color;
}

2. 与普通 CSS @import 的区别

与传统的 CSS @import 不同，SASS 的 @import 有着更高级的功能。以下几种情况，@import 将被视为普通的 CSS 语句，不会导入任何 Sass 文件：

• 文件扩展名是 .css；
• 文件名以 http:// 开头；
• 文件名是 url()；
• @import 包含 media queries。

@import "public.css"; // 普通CSS导入
@import url(public); // 普通CSS导入
@import "http://xxx.com/xxx"; // 普通CSS导入
@import 'landscape' screen and (orientation:landscape); // 带媒体查询的CSS导入

局部文件（Partials）的魅力

1. 何为局部文件

在 SASS 中，你可以通过 @import 指令导入其他 Sass 源文件，这些被导入的文件称为局部文件。局部文件使得 SASS 的模块化编写变得更加简单。

2. 防止编译

如果你不希望局部文件被单独编译，可以在文件名前加上下划线（_）。SASS 编译器会忽略以下划线开头的文件，但它们仍然可以通过 @import 导入。

示例：使用局部文件

// _theme.scss
$border-color: #999;
$background-color: #f2f2f2;
// styles.scss
@import "theme";
.container {
    border-color: $border-color;
    background-color: $background-color;
}

注意，导入时不需要包含下划线。SASS 编译器会自动识别并导入对应的局部文件。

嵌套 @import 的巧妙运用

1. 嵌套导入

通常，@import 指令用于文件的最外层，但 SASS 允许你在 CSS 规则或 @media 块中使用 @import，使得样式的作用域更加精确。

示例：嵌套导入

// _base.scss
.main-color {
    color: #F00;
}
// styles.scss
.container {
    @import "base";
}

2. 注意事项

需要注意的是，@import 不能嵌套在控制指令或混入中使用。这是因为 SASS 的设计原则是保持样式的清晰和可维护性。

总结

通过本文，我们了解了 SASS 中 @import 指令的高级用法，包括基本导入、局部文件的概念以及嵌套导入的技巧。