---

CSS 預處理器與工具

1. Less

Less 是一個 CSS 預處理器，它擴展了 CSS 語言，添加了變量、嵌套規則、混合（Mixins）、函數等特性。

主要特性

• 變量：使用 @ 符號定義變量

@primary-color: #007bff;
.button {background-color: @primary-color;
}

• 嵌套規則：可以像 HTML 結構一樣嵌套 CSS

.nav {background: #fff;&-item {padding: 10px;&:hover {background: #f0f0f0;}}
}

• 混合（Mixins）：可重用的樣式塊

.border-radius(@radius) {border-radius: @radius;
}
.button {.border-radius(5px);
}

2. Sass/SCSS

Sass 是最流行的 CSS 預處理器之一，提供了兩種語法：縮進語法（Sass）和 SCSS。

主要特性

• 變量：使用 $ 符號定義變量

$primary-color: #007bff;
.button {background-color: $primary-color;
}

• 嵌套規則：支持嵌套和父選擇器引用

.nav {background: #fff;&-item {padding: 10px;&:hover {background: #f0f0f0;}}
}

• 混合（Mixins）：使用 @mixin 和 @include

@mixin border-radius($radius) {border-radius: $radius;
}
.button {@include border-radius(5px);
}

• 函數：內置函數和自定義函數

@function calculate-width($n) {@return $n * 100px;
}
.container {width: calculate-width(5);
}

3. Tailwind CSS

Tailwind CSS 是一個功能類優先的 CSS 框架，通過組合預定義的工具類來構建界面。

主要特性

• 原子化 CSS：使用預定義的工具類

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">按鈕</button>

• 響應式設計：使用前綴實現響應式

<div class="w-full md:w-1/2 lg:w-1/3">響應式容器</div>

• 暗黑模式：使用 dark: 前綴

<div class="bg-white dark:bg-gray-800">支持暗黑模式</div>

• 自定義配置：通過 tailwind.config.js 擴展

module.exports = {theme: {extend: {colors: {primary: '#007bff',},},},
}

4. 其他工具

PostCSS

PostCSS 是一個用 JavaScript 轉換 CSS 的工具，可以：

• 自動添加瀏覽器前綴
• 支持未來的 CSS 特性
• 壓縮和優化 CSS
• 支持 CSS Modules

CSS Modules

CSS Modules 是一個 CSS 模塊化解決方案，可以：

• 自動生成唯一的類名
• 避免樣式沖突
• 支持組合和繼承

5. 選擇建議

1. 項目規模：

   • 小型項目：原生 CSS 或 Tailwind CSS
   • 中型項目：Less 或 Sass
   • 大型項目：Sass + PostCSS

2. 團隊情況：

   • 熟悉 React：考慮 CSS Modules
   • 需要快速開發：考慮 Tailwind CSS
   • 需要復雜樣式邏輯：考慮 Sass

3. 維護性：

   • 需要主題定制：Less 或 Sass
   • 需要組件化：CSS Modules
   • 需要快速迭代：Tailwind CSS