木灵鱼儿

木灵鱼儿

阅读:592

最后更新:2020/04/20/ 18:41:15

@import

sass可以将文件分割成多个片段文件,并通过一个scss文件引入这些片段,从而生成一个完整的css文件。

首先我们要知道css3有一个 @import的属性,它可以引入本地或者外部文件,但是会生成一个http的请求,这就会导致网页的css渲染会发生延迟。

而sass也支持这个属性,但是它的作用远不止如此。

@import

假设我们现在有两个sass文件,一个是主要的style.scss,一个用于初始化的reset.scss文件,我们要在style中引入reset;

@import "reset";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

@import后面使用绝对或者相对路径去引入对应的scss文件,而且sass的improt的一个特性是,可以缺省文件类型后缀。

也就是说,都是scss文件,后缀名是可以省去不写的。

而且,sass的import效果并不会产生一个http请求,他会在编译后将reset的内容放入style文件中,然后统一编译成一个css文件用于使用。

注意一点就是,如果你是import引入一个.css文件,那么注意你需要写这个.css后缀,并且这个import和css3的效果是一样的,他会生成一个http请求,解决办法就是,将css文件的后缀名改为scss,因为scss完全兼容css的写法,我们就可以将它作为一个scss文件来引入。

如果improt引入的是一个url地址或者url地址里面是一个.css后缀的文件,他们都会生成一个http请求

下划线文件名的作用

有时候我们可以看见一些项目里面有些文件是以下划线开头的,比如:_reset.scss

这种文件在引入的时候和普通引入一样:@import reset

不需要开头加上下划线,而下划线的作用是在这个引入reset.scss文件的scss文件在渲染成css文件的时候,不会讲reset中的scss转为css格式。

也就是说,reset的scss写法不会发生任何改变,它只是被移植到文件中了,你在reset中写的嵌套写法,在生成的css文件中也是一样的嵌套写法,不会发生改变。

当然这具体的作用,用于什么情况,我暂时还不太了解,知道有这种方式就行了。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 592

相关文章