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来解决这个问题。
以上就是SASS @import 函数有什么用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1626124.html
微信扫一扫 
支付宝扫一扫 
