SCSS 和 Sass 有什么区别？

SCSS（Sassy CSS）和Sass（Syntactically Awesome Style Sheets）都是CSS预处理器，它们扩展了CSS的功能，允许开发者使用变量、条件语句、循环、继承、混合等高级功能来编写样式表。虽然它们两者都是同一个项目的两种不同格式，但在语法和使用方式上有所区别。

1. 语法差异

• Sass 也被称为缩进语法（或Sass旧语法），因为它使用缩进而不是大括号和分号来界定代码块和属性。这使得它的格式更干净、类似于其他缩进式语言，如Python。

  示例（Sass）:

  sass
  $primary-color: #333
  
  body
    font: 100% $primary-color
    background-color: #fff

• SCSS 的语法与原始CSS非常接近，它使用大括号和分号。这意味着任何合法的CSS代码都是合法的SCSS代码。因此，它对于那些已经熟悉CSS的开发者来说更容易上手。

  示例（SCSS）:

  scss
  $primary-color: #333;
  
  body {
    font: 100% $primary-color;
    background-color: #fff;
  }

2. 兼容性

• Sass 语法从一开始就与CSS的兼容性较差，因为不能直接使用CSS文件。如果要将现有的CSS迁移到Sass，需要重写语法格式。

• SCSS 因为其语法兼容性好，可以轻松地把旧的CSS文件改名为 .scss 后缀，即可直接使用，并且可以逐步引入SCSS特性。

3. 文件扩展名

• Sass 文件通常有 .sass 扩展名。

• SCSS 文件通常有 .scss 扩展名。

4. 社区和工具支持

随着时间的推移，SCSS 由于其更接近传统CSS的语法，得到了更广泛的社区和工具支持。

例子

在我之前的一个项目中，我们需要迁移一个旧的CSS代码库到更现代的CSS预处理器。基于团队成员对传统CSS的熟悉度和工具链的支持，我们最终选择了SCSS。这样，我们可以很容易地将现有的CSS代码重命名为 .scss 扩展名，并且立即开始利用SCSS的高级特性，例如变量和混合，同时几乎不需要改变现有代码的结构。

总的来说，SCSS和Sass提供了相同的功能集，选择使用哪一个主要取决于开发者的偏好以及项目需求。在实践中，SCSS因为其更高的兼容性和易于上手，成为了更受欢迎的选择。

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

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

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

SCSS 语法使用文件扩展名.scss.除了一些小例外，它是 CSS 的超集，这意味着基本上所有有效的 CSS 也是有效的 SCSS。由于它与 CSS 相似，因此它是最容易习惯且最受欢迎的语法。

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

然而，**所有这一切都只能与 Sass 预编译器一起使用，**它最终会创建 CSS。它不是 CSS 标准本身的扩展。

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

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

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

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

Example.sass - sass 是较旧的语法

shell
$color: red

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

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

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

shell
$color: red;

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

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

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

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

• 较新的：SCSS ( Sassy CSS )
• 以及一种较旧的、原始的： indent 语法，它是原始的_Sass_，也称为_Sass_。

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

_SCSS_和原始_Sass_之间最重要的区别：

社会保障体系：

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

• 使用大括号{}

• 使用分号;

• 赋值符号是:

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

• 要使用_mixin，_请在其前面加上@include指令

• 文件的扩展名为_.scss_。

原始_萨斯_：

• _语法与Ruby_类似
• 没有大括号
• 没有严格的缩进
• 没有分号
• 赋值符号是=代替:
• 要创建一个 mixin，它使用=符号
• 要使用_mixin，_请在其前面加上+符号
• 文件的扩展名为_.sass_。

有些人更喜欢_Sass_，即原始语法，而另一些人则更喜欢_SCSS_。不管怎样，但值得注意的是，_Sass 的_缩进语法尚未被弃用，也永远不会被弃用（网络存档）。

使用_sass-convert_进行转换：

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

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

Sass 和 SCSS 文档

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

我会尽量不重复其他人所说的内容，你可以轻松地用谷歌搜索，但相反，我想根据我使用两者的经验（有时甚至在同一个项目中）说一些事情。

SASS专业版

• 更干净 - 如果您来自 Python、Ruby（您甚至可以使用类似符号的语法编写 props）甚至 CoffeeScript 世界，那么这对您来说会非常自然 - 编写 mixins、函数以及通常任何可重用的东西都“更容易.sass” ' 比.scss（主观）更可读。

SASS 缺点

• 空白敏感（主观），我不介意在其他语言中它，但在 CSS 中它只是困扰我（问题：复制、制表符与空格之战等）。
• 没有内联规则（这对我来说是破坏性的），你不能body color: red像在 .scss 中那样做body {color: red}
• 导入其他供应商的东西，复制普通的 CSS 片段 - 并非不可能，但一段时间后会很无聊。解决方案是在项目中包含.scss文件（与文件一起）或将它们转换为..sass``.sass

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

现在，我喜欢做的是编写 mixin 和变量，.sass以及在可能的情况下实际编译为 CSS 的代码.scss（即 Visual studio 不支持，.sass但每当我处理 Rails 项目时，我通常将其中两个结合起来，而不是在一个文件 ofc 中）。

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

最后 mixin 进行.scssvs.sass语法比较：

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