Skip to main content

SCSS（Sassy CSS）

SCSS（Sassy CSS）是 Sass（Syntactically Awesome Stylesheets）的一種語法格式，它是 CSS 的超集合，允許你使用更強大、更模組化的語法來寫樣式。SCSS 的副檔名是 .scss，語法上與 CSS 非常接近，但多了許多實用功能。以下是 SCSS 的幾個主要功能介紹：

🧩 1. 變數（Variables）​

用來儲存值，例如顏色、字型大小、邊距等等，方便重複使用和統一管理。

$primary-color: #3498db;
$padding-base: 16px;

.button {
  background-color: $primary-color;
  padding: $padding-base;
}

🧱 2. 巢狀（Nesting）​

可以像寫 HTML 一樣，巢狀結構來描述樣式，讓樣式結構更清晰。

nav {
  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
  }
}

🎛️ 3. 混合巨集（Mixins）​

定義一段可重複使用的樣式區塊，並可帶參數。

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

.container {
  @include flex-center;
}

⚙️ 4. 繼承（Extend / %Placeholder Selectors）​

可以繼承其他樣式，避免重複撰寫 CSS。

%message {
  padding: 10px;
  border-radius: 4px;
}

.success {
  @extend %message;
  background-color: green;
}

.error {
  @extend %message;
  background-color: red;
}

🧮 5. 運算（Operators）​

支援數學運算（+、-、*、/、%），可用來計算長度、百分比等等。

.container {
  width: 100% - 20px;
}

🗂️ 6. 模組化與分割檔案（Partials & Import）​

可以將 SCSS 拆成多個檔案，使用 @use 或 @import（新版建議用 @use）。

/* variables.scss */ 
$font-stack: Helvetica, sans-serif;

/* style.scss */ 
@use 'variables';

body {
  font-family: variables.$font-stack;
}

🧠 7. 條件判斷與迴圈（Control Directives）​

可以使用 @if, @for, @each, @while 寫條件邏輯與迴圈。

@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100% / 3 * $i;
  }
}