今天來介紹 CSS 的 @import。

前言

「重新認識 CSS」這個系列名稱的由來就如其名，我想要重新認識它。雖然以前就有學過 CSS，但這次想從 CSS Spec 中學到最原始的定義和內容，更加了解 CSS 的原理，讓我在切版的時候可以更加確定自己在做什麼，我踩到的雷只是因為我不夠了解它才會炸開。

在這 30 天的內容中，會將 Spec 內看到的資料整理成這個系列，也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog，如果想直接看文內的程式碼 Demo 畫面，可以到我的 Blog 來看 ?。

「重新認識 CSS」系列文章發文於：

• iT 邦幫忙
• Titangene Blog

@import 規則可以從其他 style sheet 中 import 樣式規則。

@import 語法

@import 語法有兩種寫法：

• url() 內包含 style sheet 的 URI
• 直接寫 style sheet 的 URI 的字串

例如：

@import "mystyle.css";
@import url("mystyle.css");

解析語法錯誤處理

如果 @import 規則符合下面任一項，UA 就會忽略該 @import 規則：

• 在其他所有規則之後使用 @import 規則 ( @charset 規則除外)
• 在 block 內使用 @import 規則，例如：在 @media block 內使用

在其他所有規則之後使用 @import

例如：如果 CSS 2.2 parser 遇到以下 style sheet：

@import "subs.css";
h1 { color: blue }
@import "list.css";

根據 CSS 2.2 規範，上面範例中的第二個 @import 規則 (也就是 @import "list.css"; ) 會無效，因為 @import 必須寫在其他規則的前面，所以 CSS 2.2 parser 會忽略第二個 @import 規則，最後會將 style sheet 縮減以下這樣：

@import "subs.css";
h1 { color: blue }

在 block 內使用 @import

例如：如果只想在 print media 上 import style sheet，第二個 @import 規則 (也就是 @import "print-main.css"; ) 會無效，因為此 @import 規則不能在 @media block 內使用：

@import "subs.css";
@media print {
  @import "print-main.css";
  body { font-size: 10pt }
}
h1 {color: blue }

正確的寫法是在 @import 規則後面加上要指定的 media type，例如：

@import "subs.css";
@import "print-main.css" print;
@media print {
  body { font-size: 10pt }
}
h1 {color: blue }

如果想了解其他 media type，可參閱在此系列中的另一篇「重新認識 CSS - media type」。

資料來源：

• CSS 2.2 - 6.3 The @import rule
• CSS 2.2 - 4.1.5 At-rules
• Media Queries