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 指令导入文件。
Example 1
的中文翻译为：示例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;
输出
Example 2
的中文翻译为：示例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文件中的所有内容，如变量、函数、混合等，都可以全局访问。因此，开发者很难确定特定变量的定义位置。
由于每个导入文件的所有内容都变成了全局的，所以每个文件都应该有不同的变量名来避免冲突。
SASS编译器会编译每个scss文件，无论是否导入，这会增加编译时间并降低代码效率。
在SASS中使用局部文件
为了解决上述缺点，我们可以使用SASS中的partials。我们可以通过在文件名前加下划线来创建一个partial scss文件。例如，'_test.scss'，'_colors.scss'等。
每当我们使用partials时，SASS转译器不会编译partial文件的代码，这样可以提高代码的效率。然而，我们可以将partial 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指令有一些缺点，但我们可以使用partials来解决这个问题。
