Sass中@import导入详解如何写成长尾关键词？

本文共计750个文字，预计阅读时间需要3分钟。

plaintextSass 的 @import 功能扩展了导入功能，允许导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中。此外，被导入的文件中包含的变量或混合指令（mixin）也都可以在导入中使用。

@import

​ Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

例如：

public.scss

$font-base-color:#333;

index.scss

@import "public"; $color:#666; .container{ border-color: $color; color: $font-base-color; }

编译后：

.container { border-color: #666; color: #333; }

注意：跟我们普通css里面@import的区别

但是如下的几种方式，都将作为普通的 CSS 语句，不会导入任何 Sass 文件

• 文件拓展名是 .css；
• 文件名以 开头；
• 文件名是 url()；
• @import 包含 media queries。