SASS @import函数有什么用？

使用原生 CSS 语言编写代码有时会非常混乱、冗长和复杂。为了降低编写 CSS 代码的复杂性，我们使用 CSS 预处理器。最常用的 CSS 预处理器之一是 SASS。在本文中，我们将了解 SASS 中 @import函数的使用。

SASS @import函数帮助我们将多个 SASS 或 CSS 样式表一起导入，以便它们可以一起使用。使用 @import 规则导入 SASS 文件允许对导入其他文件的其他文件的混入、变量和函数进行访问。

句法：

@import path_of_file

我们可以只使用逗号将多个 SASS 文件导入单个 SASS 文件。在我们必须导入大量文件的情况下，这使得代码更容易。

句法：

@import file1, file2, file3

示例：下面是一个代码示例，其中我们创建了两个名为style1.sass和style2.sass的单独 SASS 文件，并将 SASS 代码添加到它们，然后我们将两个 SASS 文件导入到最终的style.sass文件中。

文件名：style1.sass

.btn1
    background-color: blue
    font-size: 2em
    color: white

文件名：style2.sass

.btn2
    color: blue
    background-color: aqua
    font-size: 2em

文件名：style.sass

@import style4, style3

输出：如果上面的代码被编译，那么最终的CSS文件即“style.css”文件将如下：

CSS

.btn1 {
  background-color: blue;
  font-size: 2em;
  color: white;
}
  
.btn2 {
  color: blue;
  background-color: aqua;
  font-size: 2em;
}

注意：虽然@import函数是一个非常有用的 SASS 功能。但是，它有一些主要缺点，如下所示：

• @import 使所有变量、mixin 和其他功能全局可用，这使得库难以维护，因为它经常导致一些命名冲突。
• 它还存在一些安全风险，因为它使每个用户都可以在全球范围内编辑和更改所有内容。
• SASS 中的@extend 规则也是全局的，这使得程序员很难确定要扩展哪种样式。

由于所有这些困难， SASS 团队不鼓励使用 @import函数，并且它可能会在未来几年从语言中删除。除了 @import函数，我们在 SASS 库中有另一个 @use函数来解决上述问题并解决它们。