SASS @import 函数有什么作用？

---

SASS 是一种 CSS 预处理器，它使 CSS 代码保持简洁，因为它不允许代码重复。SASS 中有各种指令，其中之一是 @import 指令。

“@import”指令用于将一个“.scss”或“.sass”文件的代码导入另一个文件，并在编译期间执行它。我们可以使用“@import”指令将变量、函数、mixin 等从一个文件导入另一个文件。

语法

用户可以按照以下语法在 SASS 中使用“@import”指令导入文件。

@import 'test'

我们在上面的语法中导入了“test.scss”或“test.sass”文件。这里，我们不需要在导入代码时指定文件扩展名，因为编译器会自动检测它。

如果用户想在一个文件中导入多个 CSS 文件，则应使用以下语法。

@import 'file1', 'file2', 'file3', 'file4', ...

现在，让我们通过示例了解如何使用 @import 指令导入文件。

示例 1

在下面的示例中，我们在“font.scss”文件中添加了一些变量。之后，我们使用“@import”指令将“fonts.scss”文件的内容导入“styles.scss”文件。

在“style.scss”文件中，我们使用了“font.scss”文件的变量。之后，我们编译了“styles.scss”文件的代码，用户可以在输出图像中看到“style.css”文件的更新代码。

文件名 - Style.scss

@import "fonts";
$height: 5rem;
$border: 2px, solid, blue;
div {
   height: $height;
   border: $border;
   border-radius: 1rem;
}
h1 {
   font-size: $heading-font-size;
   font-weight: $heading-font-weight;
   color: $heading-font-color;
   font-family: $heading-font-family;
}
p {
   font-size: $paragraph-font-size;
   font-weight: 200;
}

文件名 - Fonts.scss

$normal-font-size: 1rem;
$paragraph-font-size: 1.2rem;
$heading-font-size: 1.5rem;
$heading-font-weight: 700;
$heading-font-color: #000;
$heading-font-family: "Roboto", sans-serif;

输出

示例 2

在下面的示例中，我们在“color.scss”文件中添加了与颜色相关的变量，在“fonts.scss”文件中添加了与字体相关的变量。在“style.scss”文件中，我们使用“@import”指令一起导入了“fonts.scss”和“colors.scss”文件。

在“style.scss”文件中，我们使用了颜色和字体的变量。在输出中，用户可以看到我们使用了变量的特定 CSS 属性的值。

文件名 - Style.scss

@import "fonts", "colors";
div {
   color: $text-color;
   background-color: $background-color;
}
ul {
   li {
      color: $text-color;
      background-color: $background-color;
      font-size: $normal-font-size;
   }
}
h1 {
   color: $primary-color;
   font-size: $heading-font-size;
   font-weight: $heading-font-weight;
   font-family: $heading-font-family;
}

文件名 - Colors.scss

$text-color: #000;
$background-color: #fff;
$primary-color: #000;
$secondary-color: #fff;
$tertiary-color: #000;

文件名 - Fonts.scss

$normal-font-size: 1rem;
$paragraph-font-size: 1.2rem;
$heading-font-size: 1.5rem;
$heading-font-weight: 700;
$heading-font-family: "Roboto", sans-serif;

输出

使用 @import 指令的优点

使用“@import”指令有一些好处，我们在下面解释。

• 我们可以将一个文件的 CSS 代码导入另一个文件。

• 我们可以为代码的每个组件创建一个单独的 CSS 文件，并在需要时导入它。

使用 @import 指令的缺点

使用“@import”指令有一些缺点，我们在下面解释。

• 它使 CSS 文件的所有内容（例如变量、函数、mixin 等）都可全局访问。因此，开发人员很难判断特定变量是在哪里定义的。

• 由于每个导入文件的所有内容都成为全局的，因此每个文件都应具有不同的变量名以避免冲突。

• SASS 编译器会编译每个 scss 文件（无论是否导入），这会增加编译时间并降低代码效率。

SASS 中的部分文件

为了解决上述缺点，我们可以使用 SASS 中的部分文件。我们可以通过以下划线开头文件名来创建部分 scss 文件。例如，“_test.scss”、“_colors.scss”等。

每当我们使用部分文件时，SASS 转换器都不会编译部分文件的代码，这会提高代码效率。但是，我们可以将部分 scss 文件的内容导入主 scss 文件。

这是一个使用部分 scss 文件的示例。

示例 3

在下面的示例中，我们创建了“_colors.scss”部分文件，并将其导入“style.scss”文件。在这个示例中，由于我们使用了部分文件，代码的编译效率更高。

但是，无论我们是否使用部分文件，代码输出都保持不变。

文件名 - Style.scss

@import "colors";
img {
   width: 100%;
   height: 100%;
   background-color: $background-color;
}
p {
   color: $text-color;
}

文件名 - _Color.scss

$text-color: #000;
$background-color: #fff;
$primary-color: #000;
$secondary-color: #fff;
$tertiary-color: #000;

输出

用户学习了如何使用“@import”指令将一个文件的代码导入另一个文件。这有助于我们将 SCSS 代码分解成更小的块并避免重复。但是，使用 @import 指令有一些缺点，但我们可以使用部分文件来解决这个问题。