标签：int 方式 直接 法规 html标签 round 免费 而且 styles
写在前面乱七八糟的前言：今天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＾)┛溜了溜了
参考文献：
20190422-外部导入CSS样式之link、CSS@import、Sass分音
标签：int 方式 直接 法规 html标签 round 免费 而且 styles
原文地址：https://www.cnblogs.com/nightnight/p/10753420.html
