CSS 预处理器：Sass的基本用法、核心特性
关于 Sass（Syntactically Awesome Style Sheets） 的详细介绍，包括其基本用法、核心特性、语法差异（.scss vs .sass），以及多个经典实用示例。
🔍 一、什么是 Sass？
Sass 是一种 CSS 预处理器（CSS Preprocessor），它扩展了 CSS 的功能，允许你使用变量、嵌套、混合（mixin）、函数、条件、循环等“编程式”语法来编写样式，最终编译为标准的 CSS 文件供浏览器使用。
✅ 主要优势：
- 减少重复代码
- 提高可维护性
- 支持模块化开发
- 更强的逻辑控制能力（条件、循环）
- 更好的团队协作与主题定制
🧩 二、Sass 两种语法格式
Sass 支持两种语法，功能相同，只是写法不同：
| 格式 | 文件扩展名 | 特点 |
|---|---|---|
| SCSS（Sassy CSS） | .scss | 类似 CSS 语法，使用 {} 和 ;，推荐使用 |
| Sass（缩进语法） | .sass | 缩进代替括号，无分号，类似 Python |
✅ 推荐使用
.scss，因为它与 CSS 完全兼容，学习成本低。
🧱 三、Sass 核心特性与用法
1. 变量（Variables）
使用 $ 定义变量，用于存储颜色、字体、尺寸等，便于统一管理。
// 定义变量
$primary-color: #007bff;
$font-stack: 'Helvetica Neue', sans-serif;
$border-radius: 4px;// 使用变量
.button {background-color: $primary-color;font-family: $font-stack;border-radius: $border-radius;
}
编译后：
.button {background-color: #007bff;font-family: 'Helvetica Neue', sans-serif;border-radius: 4px;
}
2. 嵌套（Nesting）
允许在父选择器中嵌套子元素，结构更清晰。
.navbar {background: #333;padding: 1rem;.nav-link {color: white;text-decoration: none;&:hover {color: $primary-color;}}.logo {font-weight: bold;}
}
编译后：
.navbar {background: #333;padding: 1rem;
}
.navbar .nav-link {color: white;text-decoration: none;
}
.navbar .nav-link:hover {color: #007bff;
}
.navbar .logo {font-weight: bold;
}
💡
&表示父选择器，常用于:hover,:focus, 伪类等。
3. 混合（Mixins）
类似“函数”，可定义可复用的样式块，支持参数和默认值。
// 定义一个带阴影的 mixin
@mixin box-shadow($x: 0, $y: 2px, $blur: 4px, $color: rgba(0,0,0,0.1)) {box-shadow: $x $y $blur $color;
}// 使用 mixin
.card {@include box-shadow(0, 4px, 8px, rgba(0,0,0,0.15));
}.button {@include box-shadow();
}
编译后：
.card {box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.button {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
4. 继承（Extend）
让一个选择器继承另一个的样式，减少重复。
%message-shared {border: 1px solid #ccc;padding: 10px;color: #333;
}.success {@extend %message-shared;border-color: green;
}.error {@extend %message-shared;border-color: red;
}
编译后：
.success, .error {border: 1px solid #ccc;padding: 10px;color: #333;
}
.success {border-color: green;
}
.error {border-color: red;
}
💡
%placeholder是占位符选择器，不会输出到 CSS，仅用于继承。
5. 函数（Functions）
Sass 内置大量函数（如 lighten(), darken(), rgba()），也可自定义函数。
$base-color: #007bff;.button-primary {background-color: $base-color;border-color: darken($base-color, 10%);color: lighten($base-color, 40%);
}
编译后：
.button-primary {background-color: #007bff;border-color: #005ecc;color: #b3d9ff;
}
6. 条件与循环（@if / @for / @each / @while）
Sass 支持编程逻辑，适合生成复杂样式。
示例：使用 @each 生成按钮主题
$themes: (primary: #007bff,success: #28a745,danger: #dc3545,warning: #ffc107
);@each $name, $color in $themes {.btn-#{$name} {background-color: $color;border-color: darken($color, 10%);&:hover {background-color: darken($color, 10%);}}
}
编译后（部分）：
.btn-primary {background-color: #007bff;border-color: #005ecc;
}
.btn-primary:hover {background-color: #005ecc;
}
/* ... 其他主题 */
示例：使用 @for 生成栅格类
@for $i from 1 through 12 {.col-#{$i} {width: (100% / 12) * $i;}
}
编译后：
.col-1 { width: 8.333%; }
.col-2 { width: 16.667%; }
/* ... */
.col-12 { width: 100%; }
📁 四、模块化与文件组织（@use / @import）
推荐使用 @use（Sass 1.23+ 推荐）
// _variables.scss
$primary: #007bff;
$spacing: 1rem;// _mixins.scss
@mixin center {display: flex;justify-content: center;align-items: center;
}// main.scss
@use 'variables' as vars;
@use 'mixins';.card {margin: vars.$spacing;@include mixins.center;
}
💡
_开头的文件是“部分文件”（partial），不会单独编译。
⚙️ 五、如何使用 Sass？
1. 安装 Sass
npm install -g sass
2. 编译 SCSS 到 CSS
sass input.scss output.css
3. 开启监听模式（开发时）
sass --watch input.scss output.css
4. 在项目中使用（如 Webpack/Vite）
- 使用
sass-loader（Webpack） - 或直接在 Vue/React 项目中引入
.scss文件
🎯 六、经典实用示例
✅ 示例 1：响应式断点混合（Responsive Mixins）
// _mixins.scss
@mixin mobile {@media (max-width: 768px) { @content; }
}@mixin tablet {@media (min-width: 769px) and (max-width: 1024px) { @content; }
}@mixin desktop {@media (min-width: 1025px) { @content; }
}// 使用
.container {padding: 2rem;@include mobile {padding: 1rem;}@include desktop {max-width: 1200px;margin: 0 auto;}
}
✅ 示例 2：创建主题切换（CSS 变量 + Sass）
:root {--primary-color: #{$primary};--text-color: #333;
}[data-theme="dark"] {--primary-color: #{darken($primary, 20%)};--text-color: #eee;
}.theme-toggle {background: var(--primary-color);color: white;
}
✅ 示例 3：生成图标类（@each）
$icons: (home: "\e900",user: "\e901",settings: "\e902"
);@each $name, $code in $icons {.icon-#{$name}:before {content: $code;font-family: 'IconFont';}
}
✅ 总结：Sass 的核心价值
| 特性 | 用途 |
|---|---|
$变量 | 统一管理颜色、字体、间距 |
@mixin | 封装可复用样式（阴影、动画） |
@include | 调用 mixin |
@extend | 继承样式，减少冗余 |
| 嵌套 | 提高结构可读性 |
@each/@for | 批量生成类（栅格、主题） |
@use | 模块化组织样式文件 |
📚 推荐学习资源
- 官网：https://sass-lang.com
- Sass 中文网：https://www.sass.hk
- 工具：Sass Playground（在线编译测试）
💡 一句话总结：
Sass = CSS + 变量 + 函数 + 逻辑 + 模块化，是现代前端开发不可或缺的样式编程工具。