SCSS 筆記 | Becomegood

文章目錄

一、基礎核心概念

SCSS 是 CSS 的超集，提供邏輯處理能力，最終需編譯為瀏覽器讀得懂的 .css。

1. 變數 (Variables)

用於儲存顏色、字體、間距等重複使用的數值。

// 語法：`$名稱: 數值;`
$primary-color: #3498db;

2. 巢狀結構 (Nesting)

讓 CSS 結構與 HTML 一致，增加閱讀性。

關鍵字 &：代表「父選擇器」，常用於偽類（:hover）或修飾符。

.nav {
  background: white;
  li { display: flex; }
  a {
    color: black;
    &:hover { color: $primary-color; } // 相當於 a:hover
  }
}

二、模組化管理 (Modern Standard)

將樣式拆分成小檔案，避免單一檔案過大。

1. 片段檔案 (Partials)

命名：檔名前面加底線，如 _colors.scss。
特性：不會被單獨編譯成 CSS，僅供引用。

2. @use (取代 @import)

@use 具備「命名空間」，防止變數名稱衝突。

// _theme.scss
$color: red;

// main.scss
@use 'theme';
body { color: theme.$color; }

三、代碼複用與邏輯

1. 混合器 (Mixins)

用於封裝整塊 CSS 代碼，支援傳遞參數。

// 定義：@mixin 名稱($參數) { ... }
@mixin flex-center($direction: row) {
    display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

// 引用：@include 名稱($值);
.container {
  @include flex-center(column);
}

2. 繼承 (Extend)

讓多個選擇器共享同一組樣式。佔位符 %：定義一個不會單獨出現在 CSS 中的基礎樣式。

%base-flex { display: flex; align-items: center; }
.header { @extend %base-flex; }

3. 內建函數 (Built-in Functions)

SCSS 內建處理顏色和數字的工具：

lighten($color, 10%)：把顏色變亮 10%。
darken($color, 15%)：把顏色變暗 15%。
rgba($color, 0.5)：把一個十六進制顏色轉成帶透明度的 RGBA。

四、進階控制指令

1. 流程控制 (@if, @each)

@if、@else條件判斷樣式。

@mixin theme-style($theme) {
  @if $theme == 'dark' {
    background: black;
    color: white;
  } @else {
    background: white;
    color: black;
  }
}

@each 遍歷List或Map來批次產生代碼。

$sizes: (small: 12px, normal: 16px, large: 24px);

@each $name, $value in $sizes {
  .text-#{$name} { font-size: $value; }
}
// 自動生成 .text-small, .text-normal, .text-large

2.插值語法 (#{})

如果想在「選擇器名稱」或「屬性名稱」裡使用變數，就必須用到 #{}。

$side: left;

.margin-#{$side} {
  margin-#{$side}: 20px;
}
// 編譯出 .margin-left { margin-left: 20px; }

3. 運算與函數 (@function)

與 Mixin 不同，它回傳一個值而非樣式塊。

@function double($n) {
  @return $n * 2;
}
.box { width: double(100px); } // 200px

五、 SCSS 快速對照表：該用哪一個？

功能	使用場景	特色
Variable (變數)	顏色、字體、尺寸、間距	統一管理全域數值，一改全改。
Mixin (混合器)	重複的版型組合（如 Flex 置中、RWD 斷點）	可傳參數，是複用代碼最靈活的方式。
Extend (繼承)	多個組件具備完全相同的基礎樣式	透過合併選擇器來減少編譯後的 CSS 體積。
@use (模組化)	引入外部變數檔案或工具檔	現代標準，具備命名空間，防止變數衝突。
#{} (插值)	當變數需要放在「選擇器名稱」或「屬性名」時	讓動態生成 Class 名稱成為可能。

💡 小提醒：在撰寫 SCSS 時，層級嵌套（Nesting）建議不要超過 3 層，否則編譯出的 CSS 權重會過高且難以重構。

一、 基礎核心概念