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时使用的文件扩展名。

SASS和SCSS文章之间的差异在细节上解释了差异。不要被SASS和SCSS选项所迷惑，尽管我最初也这么认为，.scs是Sassy CSS，是.sas的下一代。

如果这不合理，您可以在下面的代码中看到差异。

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

在上面的代码中，我们使用；将声明分开。为了进一步说明这一点，我甚至将.bborder的所有声明都添加到了一行中。相反，下面的SASS代码必须位于不同的行上，并带有缩进，并且不使用；。

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

您可以从下面的CSS中看到，SCSS样式与传统的SASS方法相比更类似于常规CSS。

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

我认为这些天大多数时候，如果有人提到他们正在与Sass合作，他们指的是在.scs中创作，而不是传统的.sas方式。

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

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

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

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

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

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

Sass（语法上很棒的样式表）有两种语法：

更新版本：SCSS（Sassy CSS）以及一个更古老的、原始的：indent语法，这是原始的Sass，也称为Sass。

因此，它们都是Sass预处理器的一部分，具有两种不同的语法。

SCSS和原始Sass之间最重要的区别：

scs：

语法类似于CSS（以至于每个常规有效的CSS3都是有效的SCSS，但在另一个方向上的关系显然不会发生）使用大括号｛｝使用分号；分配标志为：要创建mixin，它使用@mixin指令要使用mixin，请在其前面使用@include指令文件的扩展名为.scs。

原始Sass：

语法类似于Ruby无大括号无严格缩进无分号分配符号为=，而不是：要创建混合，它使用=符号要使用mixin，请在其前面加+号文件的扩展名为.sass。

有些人更喜欢Sass这一原始语法，而另一些人更喜欢SCSS。无论如何，但值得注意的是，Sass的缩进语法从未被弃用，也永远不会被弃用（web存档）。

sass转换：

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

Sass和SCSS文档