Question

从我一直在阅读的内容来看，Sass是一种通过变量和数学支持使CSS更强大的语言。

与SCSS有什么区别？它应该是同一种语言吗？类似？不同？

Answer 1

Sass是一款具有语法改进功能的CSS预处理器。高级语法中的样式表由程序处理，并转换为常规CSS样式表。但是，他们不扩展CSS标准本身。

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

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

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

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

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

Answer 2

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

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

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

Answer 3

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）。

Answer 4

它的语法不同，这是主要的专业（或者con，取决于你的观点）。

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

SASS专业

清洁 - 如果你来自Python，Ruby（你甚至可以用类似符号的语法编写道具）甚至是CoffeeScript世界，它对你来说都很自然 - 编写mixins，函数以及{{}中的任何可重用的东西{1}}比.sass（主观）更“容易”和可读。

SASS缺点

空白敏感（主观），我不介意其他语言，但在CSS中它只是困扰我（问题：复制，制表符对太空战争等）。
没有内联规则（这对我而言是破坏游戏规则），你不能像{。{1}}一样.scss进行游戏。body color: red
导入其他供应商的东西，复制vanilla CSS片段 - 一段时间后不是不可能但很无聊。解决方案是在项目中包含body {color: red}个文件（以及.scss个文件）或将它们转换为.sass。

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

现在，我喜欢做的是在.sass中编写mixins和变量，以及在.sass中实际编译为CSS的代码（如果可能的话）（即Visual Studio不支持.scss但是每当我处理Rails项目时，我通常会将它们中的两个组合在一起，而不是在一个文件中。

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

最后用于.sass与.scss语法比较的混合：

.sass

Answer 5

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

较新的： SCSS （ Sassy CSS ）
和较旧的原始：缩进语法，它是原始的 Sass ，也称为 Sass 。

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

SCSS 与原始 Sass 之间最重要的区别：

<强> SCSS ：

语法类似于 CSS （以至于每个常规有效的 CSS3 也是有效的 SCSS ，但是关系在其他方向显然不会发生）
使用大括号{}
使用分号;
作业标志为:
要创建 mixin ，请使用@mixin指令
要使用 mixin ，请先使用@include指令
文件具有 .scss 扩展名。

原始 Sass ：

语法类似于 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

SASS REFERENCE

Answer 6

来自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的限制，但它用简单的代码掩盖它们。

Answer 7

基本区别在于语法。虽然SASS语法松散且空格不含分号，但SCSS更像CSS。

Answer 8

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

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

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

Answer 9

原始sass类似于ruby语法，类似于ruby，jade等......

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

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

Answer 10

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可以看出，SCSS风格与普通的CSS相比，与旧的SASS方法非常相似。

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

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

我认为现在大部分时间如果有人提到他们正在与Sass合作，他们指的是.scss而不是传统的.sass方式。

Answer 11

SASS代表语法很棒的样式表。它是一个扩展 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);
}

有关更多信息，请参见官方website

Answer 12

紧凑的答案：

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

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

Answer 13

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

Answer 14

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

Answer 15

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

<块引用>

一种叫做 Sass 的语言......（是）本质上是 CSS 的扩展......它为 CSS 添加了额外的特性......只是为了让它更强大一些供我们使用。

<块引用>

Sass 的主要特性之一是能够使用变量

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

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

SCSS和Sass有什么区别？

15 个答案:

Example.sass - sass是较旧的语法

Example.scss - sassy css是Sass 3