Partials 与 @import

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

CSS 本身带了一个导入的功能,就是用 @import ,在一个 CSS 文件里面,去把其它的 CSS 文件包含进来,不过每次使用 @import 浏览器都会发出一次新的 http 请求,去下载被导入的 CSS 文件,因为每次 http 请求都会消耗服务器的一点资源,所以这样会让你的页面变慢。SASS 扩展了这个 @import 的功能,它可以让我们在一个 SASS 文件里面,去把其它的 SASS 文件包含进来,SASS 会把它们编译生成一个 CSS 文件。

这样,我们就可以去把一个项目需要的样式,分割成不同的小部分。然后再用这种导入的方法,把这些小部分,包含到一个 SASS 文件里面。这些小的部分,在 SASS 里面,叫做 partials ... 每个 partial 就是一个 SASS 文件,文件的名字的前面要用一个下划线开头,这样 SASS 就知道这样的文件是一个 partial ,也就是项目的一部分,不会单独去把这样的 SASS 文件编译成 CSS 文件。

Partial 可以让我们的 CSS 项目模块化并且更有条理一些。

下面,我们去试一下。这里我们再去新建一个 SASS 文件 ... 命名成 _base.scss ... 注意 partial 文件要用下划线开头 .. 然后在这个 SASS 文件里面,可以包含一些基本的样式 ... 比如重置浏览器样式的 CSS 样式。 先随便添加点 CSS ...

body {
margin: 0;
padding: 0;
}

保存 .. 你会发现,在 css 这个目录里面,没有编译后的 _base.scss ... 因为这个 SCSS 文件是用下划线开头的 .. 是一个 partial ... 回到这个 style.scss ...

在这个 SASS 文件里面,我们使用 @import ,去把 _base.scss 这个文件包含进来 ... 先输入 @import ... 后面用一组引号 ... 引号里面,是要包含进来的 SASS 文件 ... 这里就是 base.scss ... 这里不需要输入文件名最开始的这个下划线 ... 另外也不需要输入文件的扩展名 ...

@import "base";

因为这里要包含的 SASS 文件跟这个 SASS 文件在同一个目录的下面,所以,也不需要去指定目录的路径 ... 注意最后要加上一个分号 ...

保存 .... 在输出的结果里,你会看到在 style.scss 里面定义的样式,另外还有被它包含的 _base.scss 这个文件里面的样式 ...

Partials 与 @import《 Sass 基础 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点