CSS @import 匯入樣式

當 CSS 越寫越複雜，有時就需要將 CSS 根據特定功能拆分成獨立的檔案，如果要載入多個 CSS，除了使用 HTML 的方式載入，也可以透過 CSS 的 @import 規則，讓 CSS 裡載入其他的 CSS，這篇教學會介紹 CSS 的 @import。

快速導覽：

• 建立獨立的 CSS 檔案
• 使用 HTML 的 link 標籤匯入樣式
• 使用 @import 匯入樣式
• 搭配 @media 判斷匯入什麼樣式

建立獨立的 CSS 檔案

首先建立一支獨立的 CSS 檔案，可參考下方範例，範例中除了有一些 class 名稱，也有使用 CSS 變數，目的在於測試樣式匯入後，是否能正確讀取到這些名稱和參數。

範例 CSS：檔案連結

  :root {
    --r: red;
    --b: blue;
    --g: green;
    --o: orange;
    --s20: 20px;
    --s30: 30px;
  }
  .oxxo-init {
    top: 0;
    left: 0;
    position: relative;
    box-sizing: border-box;
    border: none;
  }
  .oxxo-test {
    font-size: 50px;
    color: red;
    background: yellow;
  }

使用 HTML 的 link 標籤匯入樣式

使用 HTML 的 <link> 標籤是匯入樣式最簡單的方法，只需要將外部樣式的網址 ( 相對路徑或絕對路徑 ) 放在標籤的 href 屬性裡，開啟網頁時就會載入樣式，下方範例開啟後，會載入 import-demo.css 這支 CSS 檔案，並使用當中的 class 和變數。

注意，因為是匯入外部樣式，因此在尚未載入之前，不會套用相關樣式。

線上展示：https://codepen.io/oxxo/pen/QwLEeev

<link rel="stylesheet" href="https://steam.oxxostudio.tw/download/css/import-demo.css">
<!-- HTML 程式碼 -->
<h2 class="a">apple</h2>
<h2 class="b">banana</h2>
<h2 class="oxxo-test">oxxo</h2>
<h2 class="c">orange</h2>
<h2 class="d">peach</h2>

<!-- CSS 程式碼 -->
<style>
  h2 {margin: 10px;}
  .a {color: var(--r);}
  .b {color: var(--g);}
  .c {color: var(--b);}
  .d {font-size: var(--s30);}
</style>

使用 @import 匯入樣式

雖然使用 <link> 匯入樣式很簡單，但每一個網頁都得重複撰寫好幾個 <link>，如果要讓網頁程式碼更乾淨好管理，也可使用 @import 的方式匯入樣式，匯入方式可以參考下方範例。

注意，因為是匯入外部樣式，因此在尚未載入之前，不會套用相關樣式。

線上展示：https://codepen.io/oxxo/pen/dPbXxxE

<!-- HTML 程式碼 -->
<h2 class="a">apple</h2>
<h2 class="b">banana</h2>
<h2 class="oxxo-test">oxxo</h2>
<h2 class="c">orange</h2>
<h2 class="d">peach</h2>

<!-- CSS 程式碼 -->
<style>
  @import 'https://steam.oxxostudio.tw/download/css/import-demo.css'; /* 使用引號包覆 CSS 路徑 */
  h2 {margin: 10px;}
  .a {color: var(--r);}
  .b {color: var(--g);}
  .c {color: var(--b);}
  .d {font-size: var(--s30);}
</style>

雖然使用 @import 和 <link> 非常類似，但因為 <link> 匯入的樣式表會在載入後渲染整份網頁，所以不論擺放的位置都會執行，但 @import 必須要放在 CSS 文件開頭，否則不會匯入，且如果有使用變數或自訂屬性，還會發生錯誤的狀況，下方範例將 @import 放在中間段落，相關樣式都不會匯入，且有使用到變數的樣式屬性，還會發生該屬性錯誤而使用預設值的狀況。

線上展示：https://codepen.io/oxxo/pen/OPLRLLN

<!-- HTML 程式碼 -->
<h2 class="a">apple</h2>
<h2 class="b">banana</h2>
<h2 class="oxxo-test">oxxo</h2>
<h2 class="c">orange</h2>
<h2 class="d">peach</h2>

<!-- CSS 程式碼 -->
<style>
  h2 {
    margin: 10px;
    font-size:30px;
    color: orange;
  }
  .a {color: var(--r);}
  @import 'https://steam.oxxostudio.tw/download/css/import-demo.css'; /* 放在這邊不會匯入 */
  .b {color: var(--g);}
  .c {color: var(--b);}
  .d {font-size: var(--s30);}
</style>

搭配 @media 判斷匯入什麼樣式

在「CSS @media 媒體查詢 ( Media Queries )」教學中有介紹透過 @media 判斷媒體條件，讓 <link> 和 @import 載入對應的 CSS，下方列出一些常見的寫法：

<link rel="stylesheet" href="https://steam.oxxostudio.tw/download/css/import-demo.css" media="(max-width:300px)">
<link rel="stylesheet" href="https://steam.oxxostudio.tw/download/css/import-demo.css" media="screen and (max-width:300px)">

@import 'css url' (max-width:300px);
@import 'css url' screen and (max-width:300px);

下方範例會使用 @import 搭配 @media，讓網頁在小於 300px 寬度時，匯入對應的樣式。

線上展示：https://codepen.io/oxxo/pen/QwLKLLv

<!-- HTML 程式碼 -->
<h2 class="a">apple</h2>
<h2 class="b">banana</h2>
<h2 class="oxxo-test">oxxo</h2>
<h2 class="c">orange</h2>
<h2 class="d">peach</h2>

<!-- CSS 程式碼 -->
<style>
  @import 'https://steam.oxxostudio.tw/download/css/import-demo.css' (max-width:300px);
  h2 {
    margin: 10px;
    color: black;
    font-size: 20px;
  }
  .a {color: var(--r);}
  .b {color: var(--g);}
  .c {color: var(--b);}
  .d {font-size: var(--s30);}
</style>

小結

透過 CSS 的 @import，可以將原本複雜的 CSS 進行分類和模組化的動作，讓網頁的 CSS 更好維護和管理，不過使用時仍然需要注意變數和自訂屬性名稱之類的細節，如果有機會，不妨運用在自己的網頁中吧。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～