SCSS和Sass有什么区别？

SASS是语法上很棒的样式表，是CSS的扩展，提供了嵌套规则，继承，混合功能，而SCSS是Sassy级联样式表，与CSS类似，填补了CSS和SASS之间的空白和不兼容之处。它是根据MIT许可获得许可的。本文详细介绍了不同之处：https：//www.educba.com/sass-vs-scss/

SASS和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是第一个，语法有点不同。例如，包括一个混合：

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

Sass忽略花括号和分号，而是放在嵌套上，我发现它更有用。

原始的sass是红宝石语法，类似于红宝石，玉石等。

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

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

他们基本上做同样的事情，但我把夫妇各行的看语法差异，看{}，;和spaces：

SASS：

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS：

$width: 100px;
$color: green;

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

SASS代表语法很棒的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)); }

萨斯

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

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

紧凑的答案：

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

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

基本区别是语法。尽管SASS的语法宽松，带有空格，没有分号，但SCSS更类似于CSS。

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

我将尽量不重复别人说的很多话，您可以轻松地用谷歌搜索，但是我想根据我在使用两者时的经验，甚至在同一个项目中，说几句话。

SASS专业版

• 更清洁-如果您来自Python，Ruby（甚至可以使用类似符号的语法编写道具）或CoffeeScript世界，这对您来说将是很自然的-编写mixin，函数以及通常所有可重用的内容.sass都更加容易和可读性比.scss（主观）。

SASS缺点

• 空格敏感（主观），我不介意使用其他语言，但是在CSS中，它让我感到困扰（问题：复制，制表符与空间大战等）。
• 没有内联规则（这对我来说body color: red是个大难题），您无法像在.scss中那样body {color: red}
• 导入其他供应商的东西，复制原始CSS片段-不是没有可能，但一段时间后很无聊。解决方案是在项目中包含.scss文件（以及.sass文件）或将其转换为.sass。

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

现在，我想做的是.sass在.scss可能的情况下在其中编写mixin和变量以及可以实际编译为CSS的代码（例如，Visual Studio不支持，.sass但是每当我在Rails项目上工作时，我通常都将其中两个结合在一起）在一个文件中c）。

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

和final mixin用于.scssvs .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 .sass文件在视觉上与.scss文件不同，例如

Example.sass-sass是较旧的语法

$color: red

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

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

Example.scss - sassy css is the new syntax as of Sass 3

$color: red;

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

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

Any valid CSS document can be converted to Sassy CSS (SCSS) simply by changing the extension from .css to .scss.

From the homepage of the language

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

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

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

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

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

Sass (Syntactically Awesome StyleSheets) have two syntaxes:

• a newer: SCSS (Sassy CSS)
• and an older, original: indent syntax, which is the original Sass and is also called Sass.

So they are both part of Sass preprocessor with two different possible syntaxes.

The most important difference between SCSS and original Sass:

SCSS:

• Syntax is similar to CSS (so much that every regular valid CSS3 is also valid SCSS, but the relationship in the other direction obviously does not happen)

• Uses braces {}

• Uses semi-colons ;
• Assignment sign is :
• To create a mixin it uses the @mixin directive
• To use mixin it precedes it with the @include directive
• Files have the .scss extension.

Original Sass:

• Syntax is similar to Ruby
• No braces
• No strict indentation
• No semi-colons
• Assignment sign is = instead of :
• To create a mixin it uses the = sign
• To use mixin it precedes it with the + sign
• Files have the .sass extension.

Some prefer Sass, the original syntax - while others prefer SCSS. Either way, but it is worth noting that Sass’s indented syntax has not been and will never be deprecated.

Conversions with 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是具有语法改进功能的CSS预处理器。程序将处理高级语法的样式表，并将其转换为常规CSS样式表。但是，它们没有扩展CSS标准本身。

支持并可以使用CSS变量，但不能像预处理器变量那样使用CSS变量。

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

Sass有两种语法。第一个被称为SCSS（Sassy CSS），在本参考文献中一直使用，它是CSS语法的扩展。这意味着每个有效的CSS样式表都是具有相同含义的有效SCSS文件。下文描述的Sass功能增强了该语法。使用此语法的文件扩展名为.scss。

第二种或更旧的语法（称为缩进语法（有时也称为“ Sass”））提供了一种更为简洁的CSS编写方式。它使用缩进而不是方括号来表示选择器的嵌套，并使用换行符而不是分号来分隔属性。使用此语法的文件扩展名为.sass。

However, all this works only with the Sass pre-compiler which in the end creates CSS. It is not an extension to the CSS standard itself.