SCSS 與 CSS 的區別：入門指南 - 謝宗佑的作品集網站

在網頁設計中，CSS（Cascading Style Sheets）是用於控制 HTML 文件樣式和佈局的語言。然而，隨著專案規模的擴大，傳統的 CSS 可能會面臨可維護性和重複性問題。為了解決這些挑戰，SCSS（Sassy CSS）作為 CSS 的預處理器應運而生，提供了更強大的功能和靈活性。

什麼是 SCSS？

SCSS 是 Sass（Syntactically Awesome Style Sheets）的語法之一，旨在擴充 CSS 的功能，使樣式表更具結構性和可維護性。SCSS 的語法與 CSS 相似，這意味著所有有效的 CSS 也是有效的 SCSS，這使得從 CSS 過渡到 SCSS 變得更加容易。

SCSS 的核心功能

變數（Variables）

SCSS 允許使用變數來儲存常用的值，如顏色、字體或尺寸，這樣可以在整個樣式表中重複使用，並在需要時統一修改。

$primary-color: #3498db;

body {
  color: $primary-color;
}

在上述範例中，$primary-color 變數儲存了主要的顏色值，應用於 body 元素的文字顏色。

巢狀（Nesting）

SCSS 支援巢狀語法，允許在選擇器內部巢狀定義子選擇器，這樣可以更直觀地表示層次結構，增強可讀性。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    text-decoration: none;
    color: $primary-color;
  }
}

這種巢狀結構清晰地展示了 nav 元素內部的 ul、li 和 a 元素的樣式定義。

混合（Mixins）

Mixins 允許定義可重用的樣式片段，並可接受參數，使樣式更具靈活性和可重用性。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box { @include border-radius(10px); }

在這個範例中，border-radius Mixins 定義了圓角樣式，並接受一個參數 $radius，box 類別透過 @include 關鍵字引入該 Mixins，並設定圓角半徑為 10px。

繼承（Inheritance）

SCSS 允許選擇器繼承其他選擇器的樣式，減少重複定義。

.button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.primary-button {
  @extend .button;
  background-color: $primary-color;
  color: #fff;
}

在這裡，primary-button 類別透過 @extend 關鍵字繼承了 button 類別的所有樣式，並新增了自己的背景色和文字顏色。

為什麼選擇 SCSS？

SCSS 提供了多種強大的功能，使樣式表的開發更高效且可維護。透過變數、巢狀、混入和繼承等特性，開發者可以撰寫更具結構性、可重用且易於維護的樣式表。此外，SCSS 與 CSS 的相容性使得現有的 CSS 樣式可以無縫地整合到 SCSS 中，降低了學習曲線。

總而言之，SCSS 作為 CSS 的強大擴充，為網頁設計師和開發者提供了更靈活和高效的工具，提升了樣式表的可維護性和可讀性。