Day6 - Astro Series: Style

Astro 系列文第六日:樣式

一個漂亮的漸層背景上面有一句標題:「樣式」

前言

前面提到撰寫 Astro 元件所需要知道的基本知識,在本章節將會更進一步說明如何為元件撰寫添加樣式。

樣式在 Astro

在 Astro 中撰寫樣式是一件非常容易的事,並且有多樣選項可供挑選。像是使用 Sass、Less 這類預處理語言或是透過插件整合添加 Tailwind,或是撰寫 Scoped CSS。

作用域樣式

可以在客戶端模板部分添加 <style> 標籤來為元件或頁面模板添加樣式,預設會被自動的封裝使其作用在該元件之中,舉例來說以下的元件樣式:

<style>
h1 {
color: red;
}
.text {
color: blue;
}
</style>

會自動渲染出這樣的結果來讓樣式只作用在該元件之中:

<style>
h1[data-astro-cid-hhnqfkh6] {
color: red;
}
.text[data-astro-cid-hhnqfkh6] {
color: blue;
}
</style>

這種樣式被侷限在元件範圍的特性讓元件與元件之間保留了邊界,可以自由的撰寫元件內的樣式而不用擔心樣式互相汙染干擾。

全局樣式

在元件內依然可以撰寫全域的 CSS ,但並不推薦,原因是因為散落包含全域樣式的組件可能會導致錯誤排查困難。一共有三種方法來撰寫全域樣式:

<style is:global>
/* 直接套用至網站上所有的 <h1> 標籤 */
h1 { color: red; }
</style>

或者使用 :global() 來達成:

<style>
:global(h1) {
color: red;
}
</style>

當然也可以自由額外撰寫 CSS 檔案在 src 資料夾當中,並根據需要引入:

import '../styles/global.css';
import 'package-name/styles.css';

class:list 組合 class

如果需要動態的組合 class 可以使用 [class:list](https://docs.astro.build/zh-cn/reference/directives-reference/#classlist) 工具屬性來達成:

---
const { isRed } = Astro.props;
---
<!-- 如果 `isRed` 為真值, class 將會是 "box red" -->
<!-- 如果 `isRed` 為假值, class 將會是 "box" -->
<div class:list={['box', { red: isRed }]}><slot /></div>

define:vars 使用 CSS 變數

<style> 標籤除了可以讀取整個頁面存在的 CSS 變數之外,也可以透過 define:vars 工具屬性來達成創建元件 CSS 的變數。

---
const foregroundColor = "rgb(221 243 228)";
const backgroundColor = "rgb(24 121 78)";
---
<style define:vars={{ foregroundColor, backgroundColor }}>
h1 {
background-color: var(--backgroundColor);
color: var(--foregroundColor);
}
</style>
<h1>Hello</h1>

具體來說 Astro 會自動在該元件最外層的元素使用行內 CSS 添加 CSS 變數,如此一來整個元素便能使用該變數。

傳遞 class 屬性

在使用 Props 傳遞 class 屬性時須留意 class 在 JavaScript 中是保留字🔗,應適當更改變數名稱。

---
const { class: className } = Astro.props;
---
<div class={className}>
<slot/>
</div>

其他 CSS 方案

到此基本的 Astro 樣式使用方式都介紹完畢了!其他像是 CSS 預處理器🔗 或是整合插件像是 Tailwind🔗 都可以從文檔中找到說明,Tailwind 在後期章節我會花更多篇幅介紹如何整合入 Astro 專案之中。

總結

綜合來說 Astro 讓你用自己習慣的方式撰寫 CSS,不管是 import 還是 <link> 還是 Scoped CSS 或是各式各樣的預處理語言或框架皆有支援,引入時相互覆蓋的優先權如下:

  • <link> 標籤在 <head> 當中(最低優先權)
  • import 樣式
  • Scoped 樣式(最高優先權)

延伸閱讀