写在前面乱七八糟的前言:今天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^)┛溜了溜了
参考文献:
原文地址:https://www.cnblogs.com/nightnight/p/10753420.html