@import

Sass扩展了CSS @import,能够导入Sass和CSS样式表,将多个样式表的CSS组合在一起,并提供对mixin函数变量的支持。原生CSS导入要求浏览器在呈现页面时发出多个HTTP请求,而Sass导入则完全在编译期间处理。

Sass导入与CSS导入具有相同的语法,只是它们允许用逗号分隔多个导入,而不是要求每个导入都有自己的@import。此外,在缩进语法中,导入的URL不需要有引号。

当Sass导入一个文件时,文件的内容将会被放到@import出现的位置。导入文件以及@import之前定义的的任何mixin函数变量都是可用的。

如果同一个样式表被多次导入,那么它会被计算相应的次数。如果它只定义函数和mixin,这通常没什么问题,但是如果它包含样式规则,它们将不止一次地编译为CSS。

文件查找

在导入文件时使用文件的绝对地址是非常不方便的,Sass的查找算法使得要导入文件变得很方便。对于初学者,您不必显式地写出要导入的文件的扩展名 @import "variables"将自动加载variables.scssvariables.sass或者variables.css

为了确保样式表在每个操作系统上都能工作,Sass根据URL而不是文件路径导入文件。这意味着即使在Windows上,也需要使用前斜杠,而不是后斜杠。

加载路径

Sass允许用户提供加载路径:Sass在解析导入时将查看的文件系统上的路径。 例如,如果将node_modules/susy/sass作为加载路径传递,则可以使用@import "susy"则加载node_modules/susy/sass/susy.scss

不过,导入总是先解析当前文件的相对路径。 仅当与当前文件相对路径不匹配时,才会使用加载路径。这可确保您在添加新库时不会意外地弄乱相对导入。

与其他一些语言不同,Sass不要求您使用./表示相对路径。相对导入总是可用的。

片段文件

有这样一个约定,以_开头的Sass文件本身不会被编译,而是单纯的作为被导入文件。这些被称为片段文件,它们告诉Sass工具不要试图编译这些文件。在导入片段文件时可以省略_

文件索引

兼容性:Dart Sass ✓|LibSass 3.6.0+|Ruby Sass 3.6.0+

自定义导入

所有的Sass实现都提供了自定义导入器方法,控制着@imports如何导入本地样式表:

嵌套

导入通常是在样式表的顶层编写的,但并不是必须的。它们也可以嵌套在样式规则原生的CSS @规则中。导入的CSS处于当前代码块的上下文中,这使得将嵌套导入的CSS作用域指向特定的元素或媒体查询是非常有用的。注意,嵌套导入中定义的全局mixin函数变量仍然是全局。

嵌套导入对于限定第三方样式表的作用域非常有用,但是如果您是要导入的样式表的作者,通常最好在mixin中编写样式,并在嵌套上下文中包含mixinmixin可以以更灵活的方式使用,在查看导入的样式表时,更清楚地了解它的用途。

嵌套导入中的CSS像mixin一样计算,这意味着任何父选择器都将引用嵌套样式表的选择器。

导入CSS

兼容性:Dart Sass 1.11.0+ |LibSass 部分支持 |Ruby Sass ✗

LibSass支持使用扩展名.CSS导入文件,但与规范相反,它们被视为SCSS文件,而不是被解析为CSS。此行为已被弃用,正在进行更新以支持下面描述的行为。

除了导入.sass.scss文件外zSass还可以导入普通的.css文件。惟一的规则是导入必须不显式地包含.CSS扩展,因为它用于表示一个原生的CSS @import

Sass导入的CSS文件不允许任何特殊的Sass特性。为了确保作者不会不小心在他们的CSS中编写Sass,所有不是有效CSS的Sass特性都会产生错误。否则,CSS将按原样呈现。Sass导入的CSS文件样式可以被继承;

原生CSS @imports

兼容性:Dart Sass ✓ |LibSass 部分支持|Ruby Sass ✓

默认情况下,LibSass能正确处理原生的CSS导入。然而,任何自定义导入器都错误地应用于原生CSS @import规则,从而使这些规则能够加载Sass文件 (表示不理解😂)。

因为@import在CSS中也有定义,所以Sass需要一种编译原生CSS@import的方法,以确保在编译时不会导入这些文件。为了实现这一点,并确保SCSS是CSS超集,Sass在编译以下@import时,视为原生CSS导入:

  • URL以.css结尾的。
  • URL以http://https://开头的。
  • 使用url()的。
  • 使用了媒体查询。

插值

尽管Sass导入不能使用插值(以确保总是能够知道mixin函数变量来自何处),但是原生CSS导入可以。这使得动态生成导入成为可能,例如基于mixin参数。

上次更新: 2019-11-5 4:49:11 PM