Day6 - Astro Series: Style

Astro 系列文第六日：样式

@ 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🔗 工具属性来达成：

---
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>你好</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 样式（最高优先权）

延伸阅读