CSS 進階技巧全攻略｜SCSS 與 Tailwind CSS，提升開發效率與設計質感

在前端開發的世界裡，CSS 的管理和維護往往是一大挑戰。這時候 SCSS 和 Tailwind CSS 就成了兩大超強的工具，各自有不同的優勢和使用情境。這篇文章將帶你深入了解 SCSS 和 Tailwind CSS 的特性、使用方式、優缺點，並透過實際範例讓你更容易上手。

一、什麼是 SCSS？

SCSS（Sassy CSS）是 Sass（Syntactically Awesome Stylesheets）的其中一種語法，是 CSS 的超集。它為 CSS 帶來了變數、巢狀結構、mixin、繼承等強大功能，讓 CSS 更具可維護性與模組化。

SCSS 特色

變數（Variables）

$primary-color: #3498db;

body {
  background-color: $primary-color;
}

巢狀語法（Nesting）

.nav {
  ul {
    li {
      a {
        color: $primary-color;
      }
    }
  }
}

Mixin（混合）

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
}

繼承（Inheritance）

%button-style {
  padding: 10px 20px;
  border-radius: 5px;
}

.btn-primary {
  @extend %button-style;
  background-color: $primary-color;
}

二、什麼是 Tailwind CSS？

Tailwind CSS 是一個以效用類別（Utility-First）的 CSS 框架，透過直接在 HTML 中使用簡潔的 class，快速建立美觀且具一致性的 UI。

Tailwind CSS 特色

快速開發

<button class="bg-blue-500 text-white px-4 py-2 rounded-lg">按我</button>

高度客製化 在 tailwind.config.js 中設定專屬設計系統。

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3498db',
      },
    },
  },
}

JIT 模式（Just-In-Time） 自動生成所需的 class，減少檔案大小。

三、SCSS vs. Tailwind CSS

特性	SCSS	Tailwind CSS
學習曲線	中等	低
可維護性	高（模組化）	中（class 管理）
開發速度	中等	高
檔案大小	可能較大	較小（JIT）

四、何時使用 SCSS 與 Tailwind

SCSS 適合 需要高度客製化的設計 團隊合作、模組化維護 長期專案

Tailwind CSS 適合 快速開發 MVP、Prototype 短期專案、個人專案 偏好原子化 CSS 風格

五、綜合範例：結合 SCSS 與 Tailwind CSS

// SCSS 樣式
$primary-color: #3498db;

.button {
  @apply bg-primary text-white px-4 py-2 rounded-lg;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

<!-- HTML 使用 -->
<button class="button">按我</button>

SCSS 和 Tailwind CSS 各有優勢，選擇合適的工具取決於你的專案需求與團隊偏好。