主要特性

1. 变量（Variables）：你可以定义变量来存储常用的值，如颜色、字体大小等，之后在样式中重复使用。这样当需要修改某个值时，只需更改变量的定义，所有引用该变量的地方都会自动更新。

$primary-color: #007bff;
$font-size-base: 16px;

body {
  color: $primary-color;
  font-size: $font-size-base;
}

2. 嵌套规则（Nesting）：Sass 允许在 CSS 选择器中进行嵌套，这使得代码结构更清晰，更易于理解和维护，与 HTML 文档的结构相对应。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

3. 混合器（Mixins）：混合器是可以重复使用的样式代码块，你可以定义一个混合器，然后在需要的地方通过 @include 指令来引用它。混合器还可以接受参数，实现更灵活的复用。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(5px);
}

4. 继承（Extend/Inheritance）：通过 @extend 指令，一个选择器可以继承另一个选择器的所有样式，这有助于减少代码冗余。

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

5. 运算（Operations）：Sass 支持在样式中进行数学运算，如加、减、乘、除等，这可以方便地计算尺寸、颜色值等。

$width: 200px;
$padding: 10px;

.box {
  width: $width + 2 * $padding;
}

编译方式

• 命令行工具：使用 sass 命令行工具，全局安装 sass 后，在终端中执行命令进行编译。例如：

sass input.scss output.css

• 构建工具集成：在项目中结合 Gulp、Webpack 等构建工具，实现自动化编译。以 Gulp 为例：

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

function styles() {
  return gulp.src('src/scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
}

exports.styles = styles;

语法格式

• SCSS（Sassy CSS）：这是 Sass 3 引入的新语法，它采用 .scss 作为文件扩展名，语法与 CSS 类似，只是增加了 Sass 的特性。大多数开发者更喜欢使用 SCSS，因为它更容易上手和迁移现有 CSS 项目。
• Sass：这是 Sass 最初的语法，采用 .sass 作为文件扩展名，使用缩进和换行来表示代码块，而不是像 CSS 那样使用花括号和分号。虽然语法更简洁，但对于习惯 CSS 语法的开发者来说，可能需要一定的学习成本。

应用场景

• 大型项目：在大型 Web 项目中，使用 Sass 可以更好地组织和管理样式代码，提高代码的可维护性和可扩展性。
• 团队协作：Sass 的模块化和复用性使得团队成员可以更方便地协作开发样式，减少代码冲突和重复劳动。
• 响应式设计：通过 Sass 的变量、运算等特性，可以更轻松地实现响应式布局和样式调整。