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