Day 6: 在 UnoCSS 中應用原子 CSS 規則進行靈活的樣式設計

2024 iThome 鐵人賽

DAY 6

Modern Web

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 6 篇

16th鐵人賽 vue3 modern web typescript javascript

MichaelHo

2024-09-20 01:00:36

180 瀏覽

分享至

介紹

在現代前端開發中，CSS 工具和框架正在迅速演變。隨著應用的增長和設計的複雜化，如何靈活且高效地設計樣式變得至關重要。UnoCSS 是一個功能強大且靈活的原子 CSS 引擎，讓開發者能夠使用小而直觀的原子 CSS 規則進行設計，而不用寫冗長的樣式代碼。在這篇文章中，我們將探討如何使用 UnoCSS 來實現靈活的樣式設計，並結合 TypeScript 進行高效開發。

什麼是 UnoCSS？

UnoCSS 是一個可擴展的原子 CSS 引擎，它的核心理念是基於實際使用的原子 CSS 規則來動態生成樣式。這樣的設計使得 UnoCSS 可以根據項目的需求，自動生成只包含使用過的樣式，從而最大限度地減少 CSS 文件的大小。UnoCSS 的另一個優勢是，它可以高度定製，並支持基於任意規則擴展樣式。

步驟 1：安裝 UnoCSS (如果先前在 day1 已經裝過的可以跳過這部分)

首先，我們需要在項目中安裝 UnoCSS。

bun add unocss

接著，我們需要將 UnoCSS 集成到項目中，這裡我們假設使用的是 Vite 作為構建工具。

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import UnoCSS from 'unocss/vite';

export default defineConfig({
  plugins: [vue(), UnoCSS()],
});

這樣，我們就將 UnoCSS 成功集成到了 Vue 應用中，並且可以開始使用原子 CSS 規則來設計樣式。

步驟 2：基礎原子 CSS 規則

UnoCSS 提供了大量預定義的原子 CSS 規則，我們可以直接使用這些規則來設計應用的樣式。例如，以下是一些常見的樣式規則：

<div class="p-4 bg-blue-500 text-white rounded-md">
  UnoCSS 是靈活的！
</div>

p-4: 設定 1rem 的內邊距。
bg-blue-500: 設定背景顏色為藍色。
text-white: 設定文字顏色為白色。
rounded-md: 設定中等圓角。

UnoCSS 的原子 CSS 規則非常直觀，且易於記憶和使用，能夠快速實現常見的樣式設計需求，如果有使用過 tailwindCss 的開發者，我相信為這類操作並不陌生。

步驟 3：自定義原子 CSS 規則

UnoCSS 不僅限於使用預定義的樣式規則，還可以根據需求自定義規則。通過在配置文件中定義自定義的原子規則，我們可以靈活擴展樣式。 (檔案: uno.config.ts)

import { defineConfig } from 'unocss';

export default defineConfig({
  rules: [
    // 自定義間距規則
    ['m-1.5', { margin: '0.375rem' }],
    ['p-1.5', { padding: '0.375rem' }],
  ],
});

這裡，我們創建了兩個自定義的原子 CSS 規則，分別為 m-1.5 和 p-1.5，來設置特定的外邊距和內邊距。

接下來，我們可以直接在 HTML 或 Vue 組件中使用這些自定義規則：

<div class="m-1.5 p-1.5 bg-red-500 text-white">
  自定義的原子 CSS 規則！
</div>

步驟 4：使用短語規則和變數

UnoCSS 支持簡短的樣式定義，例如縮寫或短語，讓開發者可以快速設計複雜的樣式。另外，UnoCSS 也支持基於變數的樣式定義，這對於設計靈活的 UI 非常有幫助。

export default defineConfig({
  shortcuts: {
    'btn': 'px-4 py-2 rounded-md bg-blue-500 text-white hover:bg-blue-700',
  },
});

在這個範例中，我們定義了一個名為 btn 的樣式快捷方式，這樣每次使用 btn 時都會應用一組預定義的樣式。

<button class="btn">點擊我</button>

步驟 5：響應式設計與條件樣式

UnoCSS 提供了對響應式設計的良好支持，我們可以根據不同的屏幕尺寸應用不同的樣式。此外，還可以根據條件動態設置樣式，從而實現更加靈活的 UI 設計。

<div class="p-4 md:p-8 bg-green-500 text-white lg:bg-red-500">
  響應式的背景顏色！
</div>

md:p-8: 當屏幕寬度為 md 以上時，內邊距設置為 2rem。
lg:bg-red-500: 當屏幕寬度為 lg 以上時，背景顏色變為紅色。

這樣，我們可以輕鬆實現響應式設計，適應不同的設備和屏幕尺寸。

步驟 6：結合 TypeScript 和 UnoCSS

UnoCSS 可以與 TypeScript 完美結合，幫助我們進行型別檢查和自動補全。當我們使用自定義樣式規則時，TypeScript 可以自動推斷出這些規則，提升開發效率。

import { defineConfig } from 'unocss';

export default defineConfig({
  rules: [
    ['custom-margin', { margin: '1.25rem' }],
  ],
});

這樣，當我們應用自定義樣式規則時，TypeScript 會自動檢查規則是否正確，並提供補全功能，避免錯誤。

最後步驟:個人常用設定

import { defineConfig, presetUno, presetIcons, presetAttributify } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives';

export default defineConfig({
  presets:[
    presetUno(),
    presetIcons({ scale: 1.2 }),
    presetAttributify(),
  ],
  rules: [
    [
      /^bgi-\[(.+)\]$/,
      ([_, s]) => {
        return {
          'background-image': s
        };
      }
    ],
    [
      /^bg-radial-\[(.+)\]$/,
      ([_, s]) => {
        return {
          background: `radial-gradient(${s.replace(/_/g, ' ')})`
        };
      }
    ],
    [
      /^box-shadow-\[(.+)\]$/,
      ([_, s]) => {
        return {
          'box-shadow': `${s.replace(/_/g, ' ')}`
        };
      }
    ],
  ],
  shortcuts: {
    'text-bg': 'text-transparent bg-clip-text',
  },
  theme: {
    breakpoints: {
      xs: '376px',
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px'
    },
  },
  transformers: [
    transformerDirectives(),
  ]
})