20190422-外部导入CSS样式之link、CSS@import、Sass分音

写在前面乱七八糟的前言：今天wuliMR黄问了一个问题，Sass的分音与link标签都是导入外部样式的，有什么不同，这真是个好问题，因为本白着实没想过，也不知道，不过没关系，成功的背后总有一个默默无闻的百度君，一直在支持着我，┓( ´∀` )┏虽然我不叫成功，扯得有点远~还是早早进入正题吧。

目录

1、link标签

2、@import语法规则

3、link标签与@import语法规则的区别

4、为什么使用link不用@import

5、Sass的分音

内容

1、link标签

XHTML标签，用于定义文档与外部资源的关系

2、@import语法规则

2.1CSS语法规则，用于导入外部CSS样式

2.2写法

推荐使用：@import url（index.css）；

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别

2.3注意事项

import规则一定要先于除了@charset的其他任何CSS规则

<style>
    #bgc{background-color: green}
    @import "index.css";
</style>
这样是不会生效滴，要改成
<style>
    @import "index.css";
    #bgc{background-color: green}
</style>

3、link标签与@import语法规则的区别

3.1引入方式

link链接式：

<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>

@import导入式：

<style type="text/css">   

    @import url("css/stylesheet.css");

</style>

3.2从属关系

link：XHTML标签，除加载CSS，还可定义RSS，rel链接属性，引用图片等资源文件

@import：CSS的语法规则，仅导入样式表

3.3兼容

link：无兼容性问题

@import：ie5以下不支持，不过现在ie5基本灭绝了吧~~哈哈哈哈

3.4加载顺序

link：引用时，页面载入同时加载

@import：引用时，需网页完全载入后加载

3.5DOM可控性

由于DOM方法基于文档，故

link可支持使用js控制DOM改变样式，而@import不支持

3.6导入其他样式表

样式表文件内可使用多个@import导入其他样式表文件，而link不行

4、为什么用link不用@import

4.1 每个@import都会产生一个新的http请求，消耗服务器资源

4.2 @import混合js文件时，在IE中引发资源文件的下载顺序被打乱（即使排列在@import后面的js文件先于@import下载），而且会打乱甚至破坏@import自身的并行下载

4.3 link混合@import会破坏并行下载，这会导致原本并行下载的样式变成一个一个的同步下载

4.4 仅用link标签，可确保样式在所有浏览器里面都能被并行且按照顺序被下载

4.5 如果import加载的样式比较大，容易出现加载延迟，甚至有闪屏的情况

5、Sass的分音（Partials）

emmm，我是乱入的旁白，最近总结了一下Sass的用法，看到分音那块便直接跳过，自以为是@import便一眼略过，哪知(￣ε(#￣)☆╰╮(￣▽￣///)打脸总是来得这么猝不及防~

5.1Sass的分音扩展了@import的功能，可将其他scss文件利用@import导入进来，而编译成为一个合体的css文件

5.2优点：使得项目模块化并更有条理

将样式分割成不同小部分Partials，每个Partials，就是一个scss文件，不过需要用_下划线开头，让Sass识别该文件是Partials，不会编译为独立的css，最后编译为一个合体css文件。

如：将文件命名为 _colors.scss

Sass并不会编译出一个color.css

但在主文件index.scss可用@import "colors";导入

注意：导入时，没有下划线，需要加分号

我是艾玛真香的小结：讲道理，视频的小哥哥声音真的很磁性，┓( ´∀` )┏，个人建议使用Sass的分音整合成一个Css文件通过link标签去导入样式才是目前而言的，最佳上策~~小白见解也就这么拙劣了~┏(＾0＾)┛溜了溜了

参考文献：

你真的知道为什么不推荐使用@import

关于CSS中@import的疑问中的评论

Sass的免费教学视频nihao.net