变量（Variables）
- 用于存储常用的值，如颜色、字体大小等。
- 示例：
$primary-color: #333;.header { color: $primary-color;}
嵌套（Nesting）
- 允许在一个选择器中嵌套另一个选择器，反映HTML结构。
- 示例：
.nav { a { color: #000; &:hover { color: #f00; } }}
混合（Mixins）
- 组合一组CSS声明，带可选参数。
- 示例：
@mixin border-radius($radius: 5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;}.box { @include border-radius(10px);}
继承（Inheritance）
- 使用
@extend指令，让一个选择器继承另一个的样式。 - 示例：
.btn { padding: 10px; font-size: 16px;}.primary-btn @extend .btn;.primary-btn { background-color: #f00;}
运算（Operations）
- 支持在CSS属性中进行基本的数学运算。
- 示例：
.container { width: 100px + 20px; height: 50px * 2;}
响应式设计（Media Queries）
- 使用嵌套的媒体查询，为不同屏幕尺寸定义样式。
- 示例：
.layout { width: 100%; @media (min-width: 768px) { width: 80%; }}
模块化（Modules）
- 将样式分解到不同文件中，通过
@import导入。 - 示例：
// _variables.scss$primary-color: #333;// style.scss@import "variables";.header { color: $primary-color;}
函数（Functions）
- 定义函数，处理复杂的逻辑。
- 示例：
@function rpm($value) { @return $value * 60;}.text { animation: rotate rpm(3s);}
条件判断（Control Directives）
- 根据条件应用不同的样式。
- 示例：
$theme: dark;.button { @if $theme == dark { background-color: #000; } @else { background-color: #fff; }}
循环（Loops）
- 使用
@for、@each等循环，生成重复的代码。 - 示例：
@for $i from 1 to 3 { .column-#{$i} { width: 100px * $i; }}
占位符选择器（Placeholders）
- 定义可重用的样式，但不会生成CSS。
- 示例：
%btn { padding: 10px;}.login-btn { @extend %btn; background-color: #f00;}
与任务运行工具的集成
- 使用Grunt、Gulp、Webpack等工具，自动化编译和优化SCSS文件。
- 示例（Gulp）：
const gulp = require('gulp');const sass = require('gulp-sass');gulp.task('scss', function() { return gulp.src('./scss/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./css'));});