Sass 是一种 CSS 预处理器，它可以让我们更加方便地编写 CSS。Sass SCSS 和 Sass SASS 是 Sass 的两种不同的语法格式。它们之间的区别在于语法的书写方式和编译后的输出结果。
Sass SCSS
Sass SCSS 是 Sass 的新语法格式，它和 CSS 的语法非常相似，使用的是大括号和分号。Sass SCSS 的语法更加易读易写，也更加容易学习和掌握。下面是一个 Sass SCSS 的示例代码：
$primary-color: #f00;
body {
background-color: $primary-color;
}在上面的代码中，我们定义了一个变量 $primary-color，并将其赋值为红色。然后我们在 body 元素中使用了这个变量，将背景色设置为红色。
Sass SASS
Sass SASS 是 Sass 的旧语法格式，它使用的是缩进来表示代码块，不使用大括号和分号。Sass SASS 的语法看起来更加简洁，但是对于新手来说可能不太容易理解。下面是一个 Sass SASS 的示例代码：
$primary-color: #f00 body background-color: $primary-color
在上面的代码中，我们也定义了一个变量 $primary-color，并将其赋值为红色。然后我们在 body 元素中使用了这个变量，将背景色设置为红色。
区别
除了语法的不同之外，Sass SCSS 和 Sass SASS 还有以下几点区别：
文件扩展名
Sass SCSS 的文件扩展名是 .scss，而 Sass SASS 的文件扩展名是 .sass。
编译方式
Sass SCSS 和 Sass SASS 的编译方式也不同。Sass SCSS 的编译方式和 CSS 一样，是将代码编译为普通的 CSS 文件。而 Sass SASS 的编译方式是将代码编译为缩进格式的 CSS 文件。
嵌套语法
Sass SCSS 和 Sass SASS 都支持嵌套语法，但是它们的嵌套语法略有不同。Sass SCSS 的嵌套语法更加直观，也更加易读易写。而 Sass SASS 的嵌套语法则需要一些时间来适应。
学习和指导意义
学习 Sass SCSS 和 Sass SASS 对于前端开发人员来说是非常有意义的。使用 Sass 可以让我们更加方便地编写 CSS，提高开发效率。而了解 Sass SCSS 和 Sass SASS 的区别，则可以让我们更加灵活地选择使用不同的语法格式。
对于新手来说，建议先学习 Sass SCSS，因为它的语法更加易读易写，并且更加接近 CSS 的语法。当你对 Sass SCSS 有了一定的了解之后，再去学习 Sass SASS，这样会更加容易理解。
结论
Sass SCSS 和 Sass SASS 都是 Sass 的语法格式，它们之间的区别在于语法的书写方式和编译后的输出结果。学习 Sass SCSS 和 Sass SASS 对于前端开发人员来说是非常有意义的，建议先学习 Sass SCSS，再去学习 Sass SASS。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6768cb7998e3e1ab1a87704d