Sass 基礎用法速覽

1. 什么是 Sass？

Sass（Syntactically Awesome Style Sheets）是一種 CSS 預處理器，它擴展了 CSS 的功能，允許你使用變量、嵌套、混合、繼承等高級特性，從而讓樣式表更易維護和復用。

Sass 有兩種語法：

• .scss（Sassy CSS）：和 CSS 語法幾乎一樣，推薦使用。
• .sass：縮進式語法，不用大括號和分號。

本教程主要以 .scss 語法為例。

---

2. 安裝 Sass

2.1 使用 npm 安裝（推薦）

npm install -g sass

2.2 使用 Dart Sass（官方推薦）

下載地址：https://sass-lang.com/install

2.3 使用 GUI 工具

如 Koala 或 Prepros。

---

3. Sass 基本用法

3.1 編譯 Sass

sass input.scss output.css

實時監聽：

sass --watch input.scss:output.css

---

4. Sass 語法詳解

4.1 變量

$primary-color: #3498db;
$padding: 16px;.button {color: $primary-color;padding: $padding;
}

4.2 嵌套

.nav {ul {margin: 0;li {display: inline-block;a {color: $primary-color;}}}
}

4.3 父選擇器引用（&）

.button {color: white;&:hover {color: yellow;}
}

4.4 注釋

// 單行注釋，不會編譯到 CSS
/* 多行注釋，會編譯到 CSS */

4.5 混合（Mixin）

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

4.6 繼承（Extend）

%base-btn {padding: 10px 20px;border: none;
}.btn-primary {@extend %base-btn;background: $primary-color;
}

4.7 運算

.container {width: 100% - 20px;padding: $padding / 2;
}

4.8 條件語句（@if, @else）

$theme: dark;body {@if $theme == dark {background: #222;color: #fff;} @else {background: #fff;color: #222;}
}

4.9 循環（@for, @each, @while）

@for $i from 1 through 3 {.col-#{$i} {width: 100px * $i;}
}$colors: red, green, blue;
@each $color in $colors {.text-#{$color} {color: $color;}
}

---

5. 模塊化與導入

5.1 分文件管理

創建 _variables.scss, _mixins.scss, _base.scss 等。

5.2 導入文件

@use 'variables';
@use 'mixins';
@use 'base';

注意：Sass 推薦使用 @use 替代舊的 @import。

---

6. 實戰示例

6.1 目錄結構

/scss├── _variables.scss├── _mixins.scss├── _base.scss└── main.scss

6.2 代碼示例

_variables.scss

$primary-color: #3498db;
$font-stack: 'Helvetica Neue', Arial, sans-serif;

_mixins.scss

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

_base.scss

body {font-family: $font-stack;color: $primary-color;
}

main.scss

@use 'variables';
@use 'mixins';
@use 'base';.header {@include mixins.flex-center;height: 60px;background: variables.$primary-color;
}

---

7. 常見問題

• Sass 和 Less 有什么區別？
  • Sass 功能更強大，社區更活躍，推薦使用。
• 如何在 Vue/React 項目中使用 Sass？
  • 安裝 sass 依賴，直接在 .vue 或 .jsx 文件中引入 .scss 文件即可。
• @import 和 @use 有什么區別？
  • @use 更現代，支持命名空間，避免變量沖突。

---

8. 參考資料

• Sass 官方文檔
• Sass 中文網