SASS代表Syntactically Awesome StyleSheets。这是一个扩展CSS为基础语言增添了力量和优雅。SASS是新命名为SCSS，有一些变化，但旧的SASS也是那里在使用SCSS或SASS之前，请查看以下差异。

一些SCSS和SASS语法示例：

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

SASS

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

编译后输出CSS（两者相同）

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

有关更多指南，请访问官方网站。

我发现自己也在想同样的事情，在哈佛大学的CS50中偶然发现了一个直截了当的解释：

一种叫做Sass的语言。。。（是）本质上是CSS的扩展。。。它为CSS添加了附加功能。。。只是为了让它更强大一点供我们使用。

Sass的一个关键特性是能够使用变量

Sass扩展名为.scs（与普通css文件的.css不同）。

因此，当我们问“scs和sass之间有什么区别？”时，答案很简单，.scs只是希望使用sass而不是常规CSS时使用的文件扩展名。

SCSS是Sass的新语法。在扩展方面，.sas表示sass，.scs表示scss。这里，SCSS具有比SASS更逻辑和复杂的编码方法。因此，对于软件领域的新手来说，更好的选择是SCSS。

Sass是第一个，语法有点不同。例如，包括mixin：

Sass: +mixinname()
Scss: @include mixinname()

Sass忽略了大括号和分号，而专注于嵌套，我发现这更有用。

我是帮助创建Sass的开发人员之一。

区别在于语法。在文本外部之下，它们是相同的。这就是sass和scs文件可以相互导入的原因。实际上，Sass有四个语法解析器：scs、Sass、CSS等等。所有这些都将不同的语法转换为抽象语法树，然后通过sass转换工具将其进一步处理为CSS输出，甚至转换为其他格式之一。

使用您最喜欢的语法，这两种语法都是完全支持的，如果您改变主意，您可以稍后在它们之间进行更改。

从语言主页

Sass有两种语法。新干线语法（从Sass 3开始）被称为“SCSS”（代表“Sassy CSS”），是CSS3语法的超集。这意味着每个有效的CSS3样式表都是有效的SCSS。SCSS文件使用扩展名.scs。第二种更古老的语法称为缩进的语法（或只是“Sass”）。灵感来自Haml的简洁适合喜欢的人简洁而不是与CSS的相似性。它不是括号和分号，而是使用行的缩进来指定块。虽然不再是主语法，缩进语法将继续得到支持。文件夹在缩进语法中，使用扩展名.sas。

SASS是一种解释性语言，它输出CSS。Sass的结构看起来像CSS（远程），但在我看来，描述有点误导；它不是CSS的替代品或扩展。它是一个解释器，最终输出CSS，所以Sass仍然有普通CSS的局限性，但它用简单的代码掩盖了它们。