CSS 進階技巧全攻略｜一次掌握 SCSS、Tailwind CSS、動畫與 RWD 設計

CSS 不只是基礎排版，進一步掌握進階技巧，能讓你的網頁設計更具彈性與質感。本篇將介紹 SCSS/SASS、Tailwind CSS、CSS 動畫及 RWD 設計，帶你邁向前端開發高手之路。

一、SCSS / SASS 預處理器的使用

1. SCSS / SASS 的優勢

• 巢狀語法（Nesting）：提升 CSS 結構清晰度。
• 變數（Variables）：統一管理顏色、字型、間距。
• Mixin：封裝可重複使用的樣式。
• Extend / Inheritance：減少重複 CSS。

2. SCSS 基本範例

$primary-color: #4CAF50;

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

.header {
  background: $primary-color;
  @include flex-center;
}

二、Tailwind CSS：效能與開發速度兼具的方案

1. Tailwind CSS 的優勢

• 原子化 CSS：用 class 名稱直接描述樣式。
• 快速開發：減少撰寫自訂 CSS。
• 高度客製化：可根據需求擴展設定。

2. Tailwind CSS 範例

<div class="flex justify-center items-center bg-green-500 text-white p-4">
  Tailwind CSS 超方便！
</div>

三、CSS 動畫技巧

1. 使用 Keyframes 製作動畫

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 1s ease-in;
}

2. Transition 讓動作更流暢

button {
  background: #4CAF50;
  transition: background 0.3s ease-in-out;
}

button:hover {
  background: #45a049;
}

四、RWD 響應式設計

1. Media Queries 基本用法

.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 50%;
  }
}

2. Mobile First 設計原則

• 先設計手機版，再擴展到桌面版。
• 確保最小裝置上的瀏覽體驗最佳。

3. 常用斷點（Breakpoints）

• min-width: 768px：平板尺寸。
• min-width: 1024px：桌面尺寸。

掌握這些 CSS 進階技巧，能讓你的前端開發效率大幅提升，並製作出更具互動性與美觀的網頁。下一篇文章將進一步探討前端效能優化策略。