SCSS和Sass之间有什么区别？

Sass是一个具有先进语法的CSS预处理器。高级语法的样式表被程序处理，并变成常规的CSS样式表。然而，它们并不***扩展CSS标准本身。

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

SCSS和Sass的区别，Sass文档页上的这段文字应该可以回答这个问题。

Sass有两种语法可用。第一种被称为SCSS（Sassy CSS），并在本参考文献中使用，是对CSS语法的扩展。这意味着每个有效的CSS样式表都是一个有效的SCSS文件，具有相同的意义。这种语法通过下面描述的Sass特性得到了增强。使用这种语法的文件具有.scss扩展名。

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

然而，所有这些只在Sass预编译器中起作用，它最终会创建CSS。它并不是对CSS标准本身的一种扩展。

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

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

使用你最喜欢的语法，这两种语法都是完全支持的，如果你改变主意，你可以在它们之间转换。

Sass .sass文件与.scss文件在视觉上是不同的，例如： ### Example.sass - sass是旧的语法。

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文档都可以通过简单地将扩展名从.css改为.scss来转换为Sassy CSS（SCSS）。

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

• 一种是较新的: SCSS (Sassy CSS)
• 和一个更古老的、原始的。 indent 语法, 这是最初的Sass 也被称为Sass.

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

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

SCSS:

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

• 使用大括号{}。

• 使用分号";"。

• 赋值符号是:

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

• 要使用mixin，就在前面加上@include指令。

• 文件的扩展名为.scss。

原始的Sass。

• 语法类似于Ruby。
• 没有牙套
• 没有严格的缩进
• 无分号
• 赋值符号是=而不是:。
• 要创建一个mixin，它使用=符号。
• 要使用mixin，必须在前面加上+号。
• 文件的扩展名为.sass。

有些人喜欢Sass，原始语法--而有些人则喜欢SCSS。 无论哪种方式，但值得注意的是，[Sass的缩进语法没有，也不会被废弃][1]。

用sass-convert进行转换。

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

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

[Sass和SCSS文件][2]

[1]: http://thesassway.com/news/sass-is-here-to-stay [2]: https://sass-lang.com/documentation

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

我尽量不重复别人说的太多，你可以很容易地谷歌，但相反，我'想从我使用两者的经验中说几件事，有时甚至在同一个项目中。

SASS亲

• 更干净--如果你来自Python、Ruby(你甚至可以用类似符号的语法来编写道具)甚至CoffeeScript的世界，你会觉得很自然--在.sass中编写混搭、函数和任何可重用的东西都比在.scss中更'容易&39; 和可读性比.scss要好得多（主观）。

SASS的缺点

• whitespace sensitive (主观), 我不介意在其他语言中使用它，但在CSS中，它只是困扰着我（问题。 复制，tab与空间战争，等等）。)
• 没有内联规则(这对我来说是游戏规则)，你不能像在.scan中那样做body color: red像你可以在.scss中做body {color: 红}
• 导入其他厂商的东西，复制普通的CSS片段--这不是不可能的，但过一段时间后就会很无聊。 解决办法是在你的项目里有.scss文件（和.sass文件一起），或者把它们转换成.sass。

除此以外--它们做着同样的工作。

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

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

最后混搭一下.scss和.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 3开始）被称为 "SCSS"（代表 "Sassy CSS"），并且是一个 是CSS3的语法的超集。这意味着 每个有效的CSS3样式表都是 SCSS也是有效的。SCSS文件使用的是 扩展名为.scss。

第二种较早的语法被称为 缩进的语法（或仅仅是 "Sass"）。 灵感来自于Haml的简洁性，它是 是为那些喜欢 简洁而不是与CSS相似的人。 它不使用括号和分号，而使用 使用行的缩进来指定块。 指定块。尽管不再是 主要的语法，但缩进的语法 将继续被支持。文件 缩进式语法中的>文件使用 扩展名为.sass。

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

基本的区别是语法。 SASS的语法很宽松，有白色的空间，没有分号，而SCSS更类似于CSS。

Sass是第一个，语法有些不同。 比如，包括一个mixin。

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

Sass忽略了大括号和分号，并在嵌套上做了铺垫，我觉得这比较有用。

&gt.SASS是Syntactically Awesome StyleSheets的缩写。 SASS是Syntactically Awesome StyleSheets的缩写。 它是一个扩展

的CSS，它为基本语言增加了力量和优雅。 SASS是

新命名为SCSS，但有一些变化，但旧的SASS也是。

在那里。 在你使用SCSS或SASS之前，请看下面的区别。

[![在此输入图片描述][1]][1] 。

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

更多攻略可参考官方【官网】[2]。

[1]: https://i.stack.imgur.com/fJUJV.jpg [2]: https://sass-lang.com/guide

SASS和SCSS的区别]1文章详细解释了两者的区别。 不要被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方式。

1:

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

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

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

它们基本上做的是一样的事情，但我把每一个都放了几行来看看语法上的区别，看看{}，;，和空格。

SASS:

$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结尾的文件代表Sass支持的"旧的" Sass支持的源于Ruby世界的语法。

SASS是Syntactically Awesome Style Sheets，是CSS的扩展，它提供了嵌套规则、继承、Mixins等功能，而SCSS是Sassy Cascaded Style Sheets，它与CSS类似，填补了CSS和SASS之间的空白和不兼容。 它是在MIT许可下授权的。 本文有更多关于两者的区别：https://www.educba.com/sass-vs-scss/