CSS 預處理器 Sass

Sass

一、Sass 是什么？

二、核心功能詳解

1. 變量（Variables）

2. 嵌套（Nesting）

3. 混合宏（Mixins）

4. 繼承（Inheritance）

5. 運算（Operations）

6. 函數（Functions）

7. 條件與循環

8. 模塊化（Modules）

三、Sass 工具鏈

1. 安裝與編譯

2. 集成構建工具

3. VS Code 插件

四、最佳實踐

五、Sass 與 Less 對比? ?

Sass 與 Less 核心對比

一、核心對比速覽

二、語法細節對比

1. 變量定義

2. 嵌套語法

3. 混合宏（Mixins）

4. 條件控制

三、功能深度對比

1. 函數與運算

2. 繼承機制

3. 模塊化支持

四、編譯與性能

五、社區與生態

六、遷移策略

七、選型建議

Sass?內置函數

一、顏色函數

1. 顏色調整

2. 顏色混合

3. 顏色通道提取

二、數值函數

三、字符串函數

四、列表函數

五、映射函數（Map）

六、其他實用函數

七、實戰示例

八、總結

Sass

一、Sass 是什么？

Sass（Syntactically Awesome Style Sheets）是一種?CSS 預處理器，通過增強 CSS 的語法（如變量、嵌套、混合宏等）提升代碼的可維護性和開發效率。Sass 最終會編譯為標準的 CSS，兼容所有瀏覽器。

兩種語法：
- SCSS（.scss）：兼容 CSS 語法，使用?{}?和?;。
- Sass（.sass）：縮進語法，無?{}?和?;（較少用）。

二、核心功能詳解

1. 變量（Variables）

定義變量：存儲顏色、尺寸、字體等重復使用的值。
```
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;
```

使用變量：

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

2. 嵌套（Nesting）

規則嵌套：簡化層級結構。

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

父選擇器引用：使用?&?引用父級。

.button {&:hover { background: darken($primary-color, 10%); }&-large { padding: 20px; }
}

3. 混合宏（Mixins）

定義可復用代碼塊：

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

調用混合宏：
```
.container {@include flex-center;
}
```

帶參數的混合宏：

@mixin box-shadow($x, $y, $blur, $color) {box-shadow: $x $y $blur $color;
}
.card {@include box-shadow(2px, 2px, 10px, rgba(0,0,0,0.1));
}

4. 繼承（Inheritance）

代碼復用：通過?@extend?共享樣式。

%button-base {padding: 10px 20px;border-radius: 4px;
}
.primary-button {@extend %button-base;background: $primary-color;
}
.secondary-button {@extend %button-base;background: #2ecc71;
}

5. 運算（Operations）

數學運算：支持?+,?-,?*,?/,?%。

$container-width: 1200px;
.sidebar {width: $container-width / 4;
}

6. 函數（Functions）

內置函數：顏色處理、字符串操作等。

.dark-bg {background: darken($primary-color, 20%);
}

自定義函數：

@function em($px, $base: 16px) {@return ($px / $base) * 1em;
}
h1 {font-size: em(32px); // 2em
}

7. 條件與循環

@if?/?@else：

@mixin theme($dark: false) {@if $dark {background: #333;color: white;} @else {background: white;color: #333;}
}

@for?循環：

@for $i from 1 through 5 {.col-#{$i} {width: 20% * $i;}
}

@each?遍歷：

$colors: red, green, blue;
@each $color in $colors {.icon-#{$color} {fill: $color;}
}

@while?循環（較少用）：

$i: 1;
@while $i < 6 {.item-#{$i} { width: 20px * $i; }$i: $i + 1;
}

8. 模塊化（Modules）

分文件管理：通過?@use?或?@import?導入模塊。

// _variables.scss
$primary-color: #3498db;// main.scss
@use 'variables' as vars;
.header {color: vars.$primary-color;
}

三、Sass 工具鏈

1. 安裝與編譯

安裝 Sass（需 Node.js）：
```
npm install -g sass
```

命令行編譯：

sass input.scss output.css
sass --watch input.scss:output.css  # 監聽文件變化

2. 集成構建工具

Webpack：使用?sass-loader。

// webpack.config.js
module: {rules: [{test: /\.scss$/,use: ['style-loader', 'css-loader', 'sass-loader']}]
}

Gulp：使用?gulp-sass。

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
gulp.task('sass', () => {return gulp.src('src/scss/*.scss').pipe(sass().on('error', sass.logError)).pipe(gulp.dest('dist/css'));
});

3. VS Code 插件

Live Sass Compiler：實時編譯?.scss?文件為?.css。

四、最佳實踐

變量命名規范：使用語義化命名（如?$brand-primary）。
模塊化拆分：按功能分文件（如?_variables.scss、_mixins.scss）。
避免深層嵌套：嵌套層級不超過 3 層，防止選擇器冗余。
慎用?@extend：過度繼承可能導致 CSS 文件體積膨脹。
注釋與文檔：使用?//?或?/* */?標注關鍵邏輯。

五、Sass 與 Less 對比

特性	Sass	Less
語法	支持 SCSS 和縮進語法	類似 CSS，使用?`@`?符號
功能復雜度	更強大（條件、循環、自定義函數）	較簡單
社區生態	更廣泛（Bootstrap 5+ 使用 Sass）	逐漸被 Sass 替代
編譯速度	較快（Dart Sass）	較慢

? ?

Sass 與 Less 核心對比

一、核心對比速覽

特性	Sass/SCSS	Less
語法	支持?`.scss`（類CSS）和?`.sass`（縮進語法）	類似 CSS，使用?`@`?符號定義變量等
變量符	`$`	`@`
混入（Mixins）	支持參數傳遞、內容塊（`@content`）	支持參數傳遞，功能相對簡單
條件/循環	支持?`@if`、`@for`、`@each`、`@while`	支持條件守衛（Guards）、循環功能較弱
函數擴展	支持自定義函數，內置函數庫豐富	內置函數較少，不支持自定義函數
繼承	通過?`@extend`?實現	通過混入模擬繼承，無原生繼承語法
模塊化	通過?`@use`、`@forward`?管理依賴（推薦）	通過?`@import`?導入（可能重復代碼）
編譯方式	Dart Sass（快）、LibSass（棄用）	基于 JavaScript（速度較慢）
社區生態	更廣泛（Bootstrap 5+、主流框架優先支持）	逐漸被 Sass 替代，維護更新較少
瀏覽器編譯	不支持	支持（通過?`<script>`?引入?`less.js`）

二、語法細節對比

1. 變量定義

Sass：

$primary-color: #3498db;
$font-size: 16px;

Less：

@primary-color: #3498db;
@font-size: 16px;

2. 嵌套語法

Sass（支持屬性嵌套）：

.box {border: {width: 1px;style: solid;color: #ddd;}
}

Less（僅支持選擇器嵌套）：

.box {border-width: 1px;border-style: solid;border-color: #ddd;
}

3. 混合宏（Mixins）

Sass（支持內容塊?@content）：

@mixin media($width) {@media (min-width: $width) {@content;}
}
.container {@include media(768px) {padding: 20px;}
}

Less（無內容塊支持）：

.mixin(@color) {color: @color;
}
.text {.mixin(#333);
}

4. 條件控制

Sass（完整邏輯控制）：

@if lightness($color) > 50% {background: black;
} @else {background: white;
}

Less（通過守衛條件）：

.mixin(@color) when (lightness(@color) > 50%) {background: black;
}

三、功能深度對比

1. 函數與運算

Sass：
支持復雜數學運算和自定義函數：

@function em($px, $base: 16px) {@return ($px / $base) * 1em;
}
.title { font-size: em(24px); } // 1.5em

Less：
僅支持內置函數（如?lighten()、darken()），無法自定義函數。

2. 繼承機制

Sass（高效繼承）：
```
%button-base { padding: 10px; }
.primary-btn { @extend %button-base; }
```
編譯后合并相同樣式，減少 CSS 體積。
Less（通過混入模擬）：
```
.button-base() { padding: 10px; }
.primary-btn { .button-base(); }
```
編譯后重復代碼，體積較大。

3. 模塊化支持

Sass（現代模塊系統）：

// _variables.scss
$primary-color: #3498db;// main.scss
@use 'variables' as vars;
.header { color: vars.$primary-color; }

Less（傳統導入）：

// variables.less
@primary-color: #3498db;// main.less
@import "variables";
.header { color: @primary-color; }

四、編譯與性能

維度	Sass	Less
編譯器	Dart Sass（官方推薦，速度快）	less.js（基于 JavaScript）
編譯速度	快（Dart 引擎優化）	較慢（大型項目明顯）
實時編譯	需工具（如?`sass --watch`、構建工具）	瀏覽器端可實時編譯
生產環境	必須預編譯	可預編譯或瀏覽器端運行

五、社區與生態

生態項	Sass	Less
主流框架	Bootstrap 5+、Vuetify、Material-UI 等優先支持	Bootstrap 3~4 主要支持
插件工具	Webpack、Gulp、Vite 深度集成	支持但更新較少
學習資源	文檔完善，社區活躍	資源較少，更新滯后
NPM 下載量	每周約 2500 萬次（2023）	每周約 700 萬次（2023）

六、遷移策略

從 Less 遷移到 Sass：
1. 重命名文件為?.scss。
2. 替換語法（如?@?→?$）。
3. 逐步替換 Less 特有功能（如 Guards →?@if）。
4. 使用工具轉換（如?less2sass）。

七、選型建議

選擇 Sass 的場景

項目復雜，需要高級功能（條件、循環、自定義函數）。
團隊協作，需模塊化管理和樣式復用。
長期維護，依賴活躍社區和工具鏈支持。
使用現代框架（如 React、Vue）和組件庫（如 Bootstrap 5+）。

選擇 Less 的場景

小型項目或快速原型開發，無需復雜邏輯。
遺留項目維護（如舊版 Bootstrap）。
需要瀏覽器端實時編譯（如簡單靜態頁面）。
Sass：功能全面、性能優越、生態完善，現代開發首選。
Less：簡單易學、瀏覽器兼容性佳，適合輕量級場景。

根據項目需求和團隊熟悉度選擇，優先推薦?Sass?應對未來挑戰。

? ?

Sass?內置函數

一、顏色函數

1. 顏色調整

函數	作用	示例
`lighten($color, $amount)`	增加顏色亮度（0%~100%）	`lighten(#336699, 20%)`?→?`#6699cc`
`darken($color, $amount)`	降低顏色亮度（0%~100%）	`darken(#336699, 10%)`?→?`#1a4d80`
`saturate($color, $amount)`	增加飽和度（0%~100%）	`saturate(#336699, 20%)`?→?`#2b5c8c`
`desaturate($color, $amount)`	降低飽和度	`desaturate(#ff0000, 50%)`?→?`#808080`
`opacify($color, $amount)`	增加不透明度（0~1）	`opacify(rgba(255,0,0,0.5), 0.2)`?→?`rgba(255,0,0,0.7)`
`transparentize($color, $amount)`	降低不透明度	`transparentize(#ff0000, 0.3)`?→?`rgba(255,0,0,0.7)`

2. 顏色混合

函數	作用	示例
`mix($color1, $color2, $weight)`	混合兩種顏色（權重 0%~100%）	`mix(red, blue, 50%)`?→?`#800080`（紫色）
`grayscale($color)`	轉為灰度顏色	`grayscale(#ff0000)`?→?`#808080`

3. 顏色通道提取

函數	作用	示例
`red($color)`	提取紅色通道值（0~255）	`red(#ff3366)`?→?`255`
`green($color)`	提取綠色通道值	`green(#ff3366)`?→?`51`
`blue($color)`	提取藍色通道值	`blue(#ff3366)`?→?`102`
`alpha($color)`	提取透明度（0~1）	`alpha(rgba(255,0,0,0.5))`?→?`0.5`

二、數值函數

函數	作用	示例
`percentage($number)`	轉為百分比（`0.5`?→?`50%`）	`percentage(0.3)`?→?`30%`
`round($number)`	四舍五入取整	`round(3.7)`?→?`4`
`ceil($number)`	向上取整	`ceil(3.2)`?→?`4`
`floor($number)`	向下取整	`floor(3.7)`?→?`3`
`abs($number)`	取絕對值	`abs(-10)`?→?`10`
`min($numbers...)`	取最小值	`min(5, 3, 8)`?→?`3`
`max($numbers...)`	取最大值	`max(5, 3, 8)`?→?`8`
`random($limit?)`	生成隨機數（0~1 或 0~$limit）	`random(100)`?→?`42`

三、字符串函數

函數	作用	示例
`quote($string)`	添加引號	`quote(text)`?→?`"text"`
`unquote($string)`	移除引號	`unquote("text")`?→?`text`
`to-upper-case($string)`	轉為大寫	`to-upper-case(abc)`?→?`ABC`
`to-lower-case($string)`	轉為小寫	`to-lower-case(ABC)`?→?`abc`
`str-length($string)`	獲取字符串長度	`str-length("hello")`?→?`5`
`str-index($string, $substring)`	查找子串位置	`str-index("hello", "e")`?→?`2`

四、列表函數

函數	作用	示例
`length($list)`	獲取列表長度	`length(1px 2px 3px)`?→?`3`
`nth($list, $n)`	獲取第?`$n`?個元素	`nth(a b c, 2)`?→?`b`
`join($list1, $list2, $separator)`	合并列表	`join(a b, c d)`?→?`a b c d`
`append($list, $value, $separator)`	追加元素到列表	`append(a b, c)`?→?`a b c`
`index($list, $value)`	查找元素位置	`index(a b c, b)`?→?`2`

五、映射函數（Map）

函數	作用	示例
`map-get($map, $key)`	根據鍵獲取值	`map-get((a:1, b:2), a)`?→?`1`
`map-merge($map1, $map2)`	合并兩個映射	`map-merge((a:1), (b:2))`?→?`(a:1, b:2)`
`map-keys($map)`	獲取所有鍵的列表	`map-keys((a:1, b:2))`?→?`a, b`
`map-values($map)`	獲取所有值的列表	`map-values((a:1, b:2))`?→?`1, 2`

六、其他實用函數

函數	作用	示例
`if($condition, $if-true, $if-false)`	條件判斷	`if(true, 10px, 20px)`?→?`10px`
`unique-id()`	生成唯一 ID（如?`u0daxx`）	`unique-id()`?→?`u0daxx`
`inspect($value)`	返回值的字符串表示形式	`inspect(10px)`?→?`10px`

七、實戰示例

1. 動態生成顏色漸變

$base-color: #3498db;
$steps: 5;@for $i from 1 through $steps {.color-step-#{$i} {background: lighten($base-color, $i * 10%);}
}

2. 響應式斷點管理

$breakpoints: (small: 480px,medium: 768px,large: 1024px
);@mixin respond-to($key) {$width: map-get($breakpoints, $key);@media (min-width: $width) {@content;}
}.container {@include respond-to(medium) {padding: 20px;}
}