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 指令导入文件。

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来解决这个问题。