Sass是一个具有语法改进的CSS预处理器。高级语法中的样式表由程序处理，并转换为常规CSS样式表。然而，它们并没有扩展CSS标准本身。

CSS变量是受支持的，可以使用，但不能像预处理器变量一样使用。

对于SCSS和Sass之间的区别，Sass文档页面上的文本应回答以下问题：

SCSS语法使用文件扩展名.scs。除了一些小的例外，它是CSS的超集，这意味着基本上所有有效的CSS都是有效的SCSS。由于它与CSS相似，所以它是最容易使用和最流行的语法。

缩进的语法是Sass的原始语法，因此它使用了文件扩展名.Sass。由于这个扩展名，它有时被称为“Sass”。缩进语法支持与SCSS相同的所有功能，但它使用缩进而不是大括号和分号来描述文档的格式。

然而，所有这些都只适用于Sass预编译器，后者最终会创建CSS。它不是CSS标准本身的扩展。

从语言主页

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

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

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

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

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

基本区别在于语法。虽然SASS的语法松散，没有空格和分号，但SCSS更像CSS。

Sass.Sass文件在视觉上与.scs文件不同，例如。

Example.sass-sass是较旧的语法

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Example.scss-sassycss是Sass 3的新语法

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

只要将扩展名从.CSS更改为.scs，任何有效的CSS文档都可以转换为SassyCSS（SCSS）。

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

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

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

它的语法不同，这是主要的优点（或缺点，取决于你的观点）。

我会尽量不重复别人说的话，你可以很容易地在谷歌上搜索，但相反，我想从我使用这两种方法的经验中说几句话，有时甚至在同一个项目中。

SASS专业

更干净-如果你来自Python、Ruby（你甚至可以用类似符号的语法编写道具），甚至是CoffeeScript世界，这对你来说是非常自然的-在.sas中编写mixin、函数和任何可重用的东西比在.scs（主观）中“更容易”和可读。

SASS缺点

空格敏感（主观），我不介意在其他语言中使用，但在CSS中，它只是让我感到困扰（问题：复制、制表符与空格大战等）。没有内联规则（这对我来说是一个突破），你不能像在scs中那样做身体颜色：红色。scs身体{颜色：红色}导入其他供应商的东西，复制普通的CSS片段-这不是不可能的，但过了一段时间后非常无聊。解决方案是在项目中包含.scs文件（与.sass文件一起）或将其转换为.sass。

除此之外，他们做同样的工作。

现在，我喜欢做的是在.sass中编写mixin和变量，如果可能的话，代码将在.scs中实际编译为CSS（即Visual studio不支持.sass，但每当我在Rails项目上工作时，我通常会将其中两个组合在一起，而不是在一个文件中）。

最近，我正在考虑给Stylus一个机会（作为全职CSS预处理器），因为它允许您在一个文件中组合两种语法（以及其他一些功能）。对于团队来说，这可能不是一个好的方向，但当你单独维护它时，这没关系。当语法有问题时，手写笔实际上是最灵活的。

最后，将.scs与.sass语法比较：

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

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文档

原始sass是ruby语法，类似于ruby、jade等。。。

在这些语法中，我们不使用{}，而是使用空格，也不使用；。。。

在scs中，语法更像CSS，但随着获得更多选项，如：嵌套、声明等，类似于less和其他预处理CSS。。。

它们基本上做了相同的事情，但我用每一行中的几行来查看语法差异，看看{}；，和空格：

SASS：

$width: 100px
$color: green

div
  width: $width
  background-color: $color

scs：

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

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方式。

紧凑的答案：

SCSS是指Sass CSS预处理器支持的主要语法。

以.scs结尾的文件表示Sass支持的标准语法。SCSS是CSS的超集。以.sass结尾的文件表示源于Ruby世界的sass支持的“旧”语法。

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);
}

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

SASS是语法上很棒的样式表，是CSS的扩展，它提供了嵌套规则、继承和混合的特性，而SCSS是Sassy级联样式表，它与CSS相似，填补了CSS和SASS之间的空白和不兼容性。它是根据麻省理工学院的许可证颁发的。本文详细介绍了这些差异：https://www.educba.com/sass-vs-scss/

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

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

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

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

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

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

TL；博士

两者都是Sass，但不同的只是编译选项。

S（组件）CSS=Sass

您可以使用SASS的语法不仅有一种，还有两种：一方面，您具有原始形式，这很高兴被称为“缩进语法”或简称为“SASS”。此外，还有一个更新的变体，它更接近于CSS的规范，因此被称为Sassy CSS（SCSS），即SASS风格的CSS。在SASS第3版中，SCSS已被确立为官方语法。最大的区别是使用了括号和分号。

原始SASS语法使用缩进和换行符，这是一种基于YAML的方法。要终止一行代码，只需换行即可，即按Enter键。缩进非常简单地通过制表器工作。因此，通过改变字体的位置，就形成了分组——所谓的声明块。这对于CSS本身是不可能的。这里，大括号必须用于分组，分号必须用于属性声明。这正是SCSS所需要的。

因此，SASS与SCSS之间存在争议

一些用户对原始SASS的易用性信誓旦旦，因为在移动源代码片段时，您不必注意括号的正确位置，通常会生成更精简、更简洁的代码。总的来说，“缩进语法”使用更少的字符和行。另一方面，SCSS的支持者很乐意接受额外的努力，因为无论如何，它与CSS所知的更为相似。

SCSS是CSS的超集，这确保了CSS代码基本上也可以在SCSS中工作，但不是相反。尽管如此，SASS的功能仍被完全包括在内。这使得同时使用两种语言更加容易。此外，对于已经使用CSS并且已经习惯语法的人来说，切换要容易得多。尽管SASS支持这两种语法，但您必须根据项目进行选择：为了能够区分不同的格式，您可以将文件扩展名为.SASS或.scs。