@import

45 0

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
  • 本文分类:SASS
  • 本文标签:暂无标签
  • 流行热度:已超过 45 人围观了本文
  • 发布日期:2020年04月20日 - 18时40分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。

评论(0)

微信收款码
微信收款码