SCSS 和 Sass 有什么区别？

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

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

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

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

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

然而，**所有这一切都只能与 Sass 预编译器一起使用，**它最终会创建 CSS。它不是 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专业版

• 更干净 - 如果您来自 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