昨天我們學會了基本的樣式設定，今天來解鎖一個更強大的工具：CSS 預處理器 (Preprocessor)，其中最受歡迎的就是 Sass/SCSS。

什麼是 SCSS？

您可以把它想像成是「會寫程式的 CSS」。

它讓您能使用變數、巢狀結構、函式等程式語言的特性來寫樣式，最後再把它「編譯」成瀏覽器看得懂的普通 CSS。這能讓您的樣式碼更乾淨、更有條理，也更容易維護。

SCSS 的三大超能力

1️⃣ 變數 (Variables)：把常用的顏色、字體大小存成變數，要改就一次搞定！

以前要改三個地方

舊方法

.title { color: #c0392b; }
.button { background-color: #c0392b; }
.link:hover { color: #c0392b; }

現在只要改一個變數！

SCSS 方法

$primary-color: #c0392b; // 定義變數

.title { color: $primary-color; }
.button { background-color: $primary-color; }
.link:hover { color: $primary-color; }

2️⃣ 巢狀 (Nesting)：像 HTML 一樣，把子層的樣式包在父層裡，結構一目了然。

以前的寫法

傳統 CSS

nav { /* ... */ }
nav ul { /* ... */ }
nav ul li { /* ... */ }
nav ul li a { /* ... */ }

現在的巢狀寫法

SCSS 巢狀

nav {
  /* ... */
  ul {
    /* ... */
    li {
      /* ... */
      a { /* ... */ }
    }
  }
}

如何在 Nuxt 中使用 SCSS？

在 Nuxt 中啟用 SCSS 非常簡單，只要兩步：

安裝工具

打開您的終端機，執行以下指令來安裝 sass。

Terminal

npm install -D sass

(-D 表示這是一個開發時才需要的工具)

宣告語言

在您的 .vue 檔案中，只要在 <style> 標籤上加上 lang="scss"，就可以開始使用 SCSS 的語法了！

Navigation.vue

<template>
  <nav>
    <ul>
      <li><a href="#">首頁</a></li>
    </ul>
  </nav>
</template>

<style lang="scss" scoped>
  $nav-background: #333;
  $link-color: white;

  nav {
    background-color: $nav-background;
    ul {
      list-style: none;
      li {
        a {
          color: $link-color;
          text-decoration: none;
        }
      }
    }
  }
</style>

今日總結

今天我們學會了如何使用 SCSS 這個強大的工具，來讓我們的樣式碼變得更聰明、更有組織。

變數讓我們能集中管理設計元素。

巢狀讓我們的樣式結構更清晰。

明天，我們將繼續探討如何引入外部的 CSS 函式庫，例如一些酷炫的動畫庫，讓您的網站動起來！