點燈坊

失くすものさえない今が強くなるチャンスよ

使用 CSS Variable 改變預設值

Sam Xiao's Avatar 2024-02-04

雖然 Pico CSS 為 Classless CSS，已經為原生 HTML Element 提供 Default Style，但仍然會遇到一些設定值與需求不符，典型就是 Pico CSS 為很多 Element 都提供了預設的 Vertical Padding，此時我們可以自行修改 CSS Variable。

Version

Pico CSS 1.5.11

CSS

assets/css/style.css

body > main {
  --block-spacing-vertical: 1rem;
}

h1 {
  --typography-spacing-vertical: 1rem;
}
  • 在 assets 目錄下建立 CSS 檔案
  • 在該 CSS 檔內將 CSS variable 加以 override

HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/pico.min.css" />
    {{ $css := resources.Get "css/style.css" }}
    {{ if hugo.IsProduction }}
      {{ $css = $css | minify | fingerprint }}
    {{ else }}
      {{ $css = $css | fingerprint }}
    {{ end }}
    <link rel="stylesheet" href="{{ $css.RelPermalink }}" />
    {{ $title := "Hugo X Pico CSS Lab" }}
    <title>{{ $title }}</title>
  </head>
  <body>
    <main class="container">
      <section class="grid">
        <h1>{{ $title }}</h1>
      </section>
      <section class="grid">
        <input placeholder="Add an item to list" />
        <button>Add item</button>
      </section>
    </main>
  </body>
</html>

Line 7

{{ $css := resources.Get "css/style.css" }}
  • resources.Get：從 assets 目錄取得檔案

Line 8

{{ if hugo.IsProduction }}
  {{ $css = $css | minify | fingerprint }}
{{ else }}
  {{ $css = $css | fingerprint }}
{{ end }}
  • hugo.IsProduction：CSS 檔案只有在 build 時才需要加以壓縮，所以使用 hugo.IsProduction 判斷是否在 build 階段
  • minify：將 CSS 壓縮
  • fingerprint：以亂數產生檔名，避免 CSS 被 Browser 給 cache

Line 13

<link rel="stylesheet" href="{{ $css.RelPermalink }}" />
  • RelPermalink：回傳檔案的相對路徑

variable001

  • 調整過的 vertical margin 在 電腦 版比較合理

variable002

  • 調整過的 vertical margin 在 手機 版也比較合理

Conclusion

  • 與 daisyUI + Tailwind CSS 哲學不同，daisy 是為 HTML Element 提供了簡單的預設 CSS class，若不符合需求則可用 Tailwind CSS 的 utility class 加以修改；Pico CSS 哲學則是直接為 HTML Element 提供 default style，連 class 都不需要，若不符合需求則可用 CSS variable 加以修改
  • 唯因為 CSS 天生設計所限制，並非直接改 :root 的 CSS 即可，而必須配合 selector 去 override 該 CSS variable

# Pico CSS