SCSS 和 Sass 有什么区别？

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

CSS 变量受支持并且可以使用，但不如预处理器变量。

对于 SCSS 和 Sass 之间的区别，Sass documentation page 上的这段文字应该回答这个问题：

Sass 有两种可用的语法。第一个，称为 SCSS (Sassy CSS)，在本参考资料中使用，是 CSS 语法的扩展。这意味着每个有效的 CSS 样式表都是具有相同含义的有效 SCSS 文件。这个语法通过下面描述的 Sass 特性得到了增强。使用此语法的文件具有 .scss 扩展名。第二种和更旧的语法，称为缩进语法（或有时简称为“Sass”），提供了一种更简洁的 CSS 编写方式。它使用缩进而不是括号来表示选择器的嵌套，并使用换行符而不是分号来分隔属性。使用此语法的文件具有 .sass 扩展名。

但是，最终创建 CSS 的 all this works only with the Sass pre-compiler。它不是 CSS 标准本身的扩展。

---

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

区别在于语法。在文字外观之下，它们是相同的。这就是为什么 sass 和 scss 文件可以相互导入的原因。实际上，Sass 有四种语法解析器：scss、sass、CSS 和 less。所有这些都将不同的语法转换为 Abstract Syntax Tree，然后通过 sass-convert 工具将其进一步处理为 CSS 输出，甚至转换为其他格式之一。

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

---

Sass .sass 文件在视觉上与 .scss 文件不同，例如

Example.sass - sass 是较旧的语法

$color: red

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

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

Example.scss - sassy css 是 Sass 3 的新语法

$color: red;

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

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

只需将扩展名从 .css 更改为 .scss，任何有效的 CSS 文档都可以转换为 Sassy CSS (SCSS)。

---

Sass（Syntactically Awesome StyleSheets）有两种语法：

较新的：SCSS（Sassy CSS）

和一个更旧的、原始的：缩进语法，它是原始的 Sass，也称为 Sass。

所以它们都是 Sass 预处理器的一部分，具有两种不同的可能语法。

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

SCSS：

语法类似于 CSS（以至于每个常规有效 CSS3 也是有效 SCSS，但另一个方向的关系显然不会发生）

使用大括号 {}

使用分号；

分配标志是：

要创建一个 mixin，它使用 @mixin 指令

要使用 mixin，它前面有 @include 指令

文件具有 .scss 扩展名。

原始萨斯：

语法类似于 Ruby

没有大括号

没有严格的缩进

没有分号

赋值符号是 = 而不是：

要创建一个 mixin，它使用 = 符号

要使用 mixin，它前面有 + 号

文件具有 .sass 扩展名。

有些人更喜欢 Sass，这是原始语法 - 而其他人则更喜欢 SCSS。无论哪种方式，但值得注意的是 Sass’s indented syntax has not been and will never be deprecated。 （档案）

使用 sass-convert 进行转换：

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

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

The Sass and SCSS documentation

---

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

我会尽量不重复别人说的话，你可以很容易地用谷歌搜索，但是，我想根据我使用两者的经验说几件事，有时甚至是在同一个项目中。

SASS 专业版

更干净——如果你来自 Python、Ruby（你甚至可以用类似符号的语法编写 props）甚至是 CoffeeScript 世界，这对你来说会很自然——在 .sass 中编写 mixins、函数和通常任何可重用的东西都是很多的比 .scss 中的“更容易”和可读性（主观）。

SASS 缺点

空格敏感（主观），我不介意在其他语言中，但在 CSS 中它只是困扰我（问题：复制，标签与空间战争等）。

没有内联规则（这对我来说是游戏破坏），你不能像在 .scss body {color: red} 中那样做 body color: red

导入其他供应商的东西，复制原始的 CSS 片段——不是不可能，但一段时间后会很无聊。解决方案是在您的项目中包含 .scss 文件（连同 .sass 文件）或将它们转换为 .sass。

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

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

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

最后是用于 .scss 与 .sass 语法比较的 mixin：

// 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

---

从homepage of the language

Sass 有两种语法。新的主要语法（从 Sass 3 开始）被称为“SCSS”（代表“Sassy CSS”），是 CSS3 语法的超集。这意味着每个有效的 CSS3 样式表也是有效的 SCSS。 SCSS 文件使用扩展名 .scss。第二种较旧的语法称为缩进语法（或简称为“Sass”）。受 Haml 简洁的启发，它适用于喜欢简洁而不是与 CSS 相似的人。它不使用括号和分号，而是使用行的缩进来指定块。尽管不再是主要语法，但仍将继续支持缩进语法。缩进语法中的文件使用扩展名 .sass。

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

---

SASS 代表语法上很棒的样式表。它是 CSS 的扩展，为基本语言增添了力量和优雅。 SASS 新命名为 SCSS，但有一些改动，但旧的 SASS 也存在。在使用 SCSS 或 SASS 之前，请查看以下区别。

https://i.stack.imgur.com/fJUJV.jpg

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

如需更多指南，您可以查看官方website。

---

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

---

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

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

Sass 忽略了大括号和分号并放在嵌套上，我发现它更有用。

---

Difference between SASS and SCSS 文章详细解释了差异。不要被 SASS 和 SCSS 选项混淆，虽然我最初也是，.scss 是 Sassy CSS 并且是 .sass 的下一代。

如果这没有意义，您可以在下面的代码中看到差异。

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

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

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

在上面的代码中，我们使用 ;将声明分开。我什至将 .border 的所有声明添加到一行中以进一步说明这一点。相比之下，下面的 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 中看到，与旧的 SASS 方法相比，SCSS 样式更类似于常规 CSS。

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

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

我认为这些天大部分时间，如果有人提到他们正在使用 Sass，他们指的是使用 .scss 而不是传统的 .sass 方式进行创作。

---

原来的 sass 是类似于 ruby 的语法，类似于 ruby、jade 等...

在这些语法中，我们不使用 {}，而是使用空格，也没有使用 ;...

在 scss 中的语法更像 CSS，但具有更多选项，例如：嵌套、声明等，类似于 less 和其他预处理 CSS ...

它们基本上做同样的事情，但我放了几行来查看语法差异，看看 {}、; 和 spaces：

萨斯：

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS：

$width: 100px;
$color: green;

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

---

紧凑的答案：

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

以 .scss 结尾的文件代表 Sass 支持的标准语法。 SCSS 是 CSS 的超集。

以 .sass 结尾的文件代表源自 Ruby 世界的 Sass 支持的“旧”语法。

---

TL;博士

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

S(assy) 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 或 .scss。

---

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

---

简单地说，SASS（Syntactically Awesome Style Sheets）是一种预处理脚本语言，会被编译或解释成 CSS。 SassScript 本身就是一种脚本语言，而 SCSS 是建立在现有 CSS 语法之上的 SASS 的主要语法。

---

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

---

发现自己想知道同样的事情，并在 Harvard's CS50 中偶然发现了一个直截了当的解释：

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

Sass 的关键特性之一是使用变量的能力

Sass 扩展名是 .scss（相对于常规 CSS 文件的 .css）。

所以，当我们问“scss 和 sass 有什么区别？”时- 答案可能只是 .scss 只是希望使用 Sass 而不是常规 CSS 时使用的文件扩展名。

---