sass基础语法
Sass（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，提供了比原生 CSS 更强大、更灵活的语法功能。它有两种语法格式：
- Sass（缩进语法，
.sass文件） - SCSS（CSS-like 语法，
.scss文件），推荐使用 SCSS，因其更接近标准 CSS。
一、Sass/SCSS 基础语法
1. 变量（Variables）
$primary-color: #3498db;body {background-color: $primary-color;
}
2. 嵌套（Nesting）
nav {ul {list-style: none;}li {display: inline-block;}a {text-decoration: none;color: $primary-color;}
}
编译为 CSS：
nav ul {list-style: none;
}
nav li {display: inline-block;
}
nav a {text-decoration: none;color: #3498db;
}
3. 父选择器 &
a {color: blue;&:hover {color: red;}
}
编译为 CSS：
a {color: blue;
}
a:hover {color: red;
}
4. 混合宏（Mixins）
用于定义可复用的样式块：
@mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;-ms-border-radius: $radius;border-radius: $radius;
}.box {@include border-radius(10px);
}
5. 函数（Functions）
可以自定义函数并返回值：
@function calculate-rem($size) {$rem-size: $size / 16px;@return #{$rem-size}rem;
}body {font-size: calculate-rem(14px);
}
6. 导入（Import）
将多个 Sass 文件合并为一个 CSS 文件：
// _variables.scss
$primary-color: #3498db;// main.scss
@import 'variables';body {background-color: $primary-color;
}
⚠️ 注意：Sass 的
@import已被弃用，建议使用@use和模块化方式（见下文）。
7. 模块化（@use / @forward）
// _colors.scss
$primary: #3498db;
$secondary: #e74c3c;// main.scss
@use 'colors';body {background: colors.$primary;
}
8. 继承（Extend）
通过 @extend 继承其他选择器的样式：
.message {padding: 10px;border: 1px solid #ccc;
}.error {@extend .message;color: red;
}
9. 条件语句与循环
条件判断（if/else）
@mixin theme-color($theme) {@if $theme == dark {background-color: #333;color: #fff;} @else {background-color: #fff;color: #333;}
}.container {@include theme-color(dark);
}
循环（for / each）
@for $i from 1 through 5 {.col-#{$i} {width: 20% * $i;}
}// 或者
$list: red, blue, green;
@each $color in $list {.btn-#{$color} {background: $color;}
}
二、Sass 编译方式
你可以使用以下工具将 .scss 文件编译为 .css 文件：
- Dart Sass（官方推荐）
- Node.js +
sass-loader（配合 Webpack） - VSCode 插件如 Live Sass Compiler
安装 Dart Sass：
npm install sass --save-dev
编译命令：
npx sass src/styles.scss dist/styles.css
三、使用建议
| 技巧 | 说明 |
|---|---|
使用 _filename.scss | 下划线开头表示 partial 文件，不会单独编译 |
| 模块化组织结构 | 如 base/, components/, layout/, themes/ 等目录 |
使用占位符 % | 避免无用类输出，只用于 @extend |
| 变量命名规范 | $spacing-sm, $font-title 等 |
使用 !default 设置默认值 | $color: red !default; |