CSS SCSS 和 Sass 有什么区别？

What's the difference between SCSS and Sass?

提问by bruno077

From what I've been reading, Sass is a language that makes CSS more powerful with variable and math support.

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

What's the difference with SCSS? Is it supposed to be the same language? Similar? Different?

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

采纳答案by bruno077

Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do notextend the CSS standard itself.

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

CSS variables are supported and can be utilized but not as well as pre-processor variables.

支持和使用 CSS 变量，但不如预处理器变量好。

For the difference between SCSS and Sass, this text on the Sass documentation pageshould answer the question:

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

There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scssextension.

The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sassextension.

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.

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

回答by chriseppstein

I'm one of the developers who helped create Sass.

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

The difference is UI. Underneath the textual exterior they are identical. This is why sass and scss files can import each other. Actually, Sass has four syntax parsers: scss, sass, CSS, and less. All of these convert a different syntax into an Abstract Syntax Treewhich is further processed into CSS output or even onto one of the other formats via the sass-convert tool.

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

Use the syntax you like the best, both are fully supported and you can change between them later if you change your mind.

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

回答by Anthuan Vásquez

The Sass .sassfile is visually different from .scssfile, e.g.

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

Example.sass - sass is the older syntax

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

Example.scss - sassy css 是 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 .cssto .scss.

任何有效的CSS文件可以简单地通过从改变扩展转换为野蛮CSS（SCSS）.css到.scss。

回答by simhumileco

Sass(Syntactically Awesome StyleSheets) have two syntaxes:

Sass( Syntactically Awesome StyleSheets) 有两种语法：

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

• 更新：SCSS（Sassy CSS）
• 和一个较旧的、原始的: indent 语法，它是原始的Sass，也称为Sass。

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

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

The most important difference between SCSSand original Sass:

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

SCSS:

社会保障：

• Syntax is similar to CSS(so much that every regular valid CSS3is 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 mixinit uses the @mixindirective
• To use mixinit precedes it with the @includedirective
• Files have the .scssextension.

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

• 使用大括号 {}

• 使用分号 ;
• 赋值符号是 :
• 要创建一个mixin，它使用@mixin指令
• 要使用mixin，它前面有@include指令
• 文件具有.scss扩展名。

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 mixinit precedes it with the +sign
• Files have the .sassextension.

• 语法类似于Ruby
• 没有大括号
• 没有严格的缩进
• 没有分号
• 赋值符号=代替:
• 要创建一个 mixin，它使用=符号
• 要使用mixin，它前面有+符号
• 文件具有.sass扩展名。

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

有些人更喜欢原始语法Sass，而其他人则更喜欢SCSS。无论哪种方式，但值得注意的是，Sass 的缩进语法尚未并且永远不会被弃用。

Conversions with sass-convert:

使用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 和 SCSS 文档

回答by Drops

Its syntax is different, and that's the main pro (or con, depending on your perspective).

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

I'll try not to repeat much of what others said, you can easily google that but instead, I'd like to say a couple of things from my experience using both, sometimes even in the same project.

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

SASS pro

SASS专业版

• cleaner - if you are coming from Python, Ruby (you can even write props with symbol-like syntax) or even the CoffeeScript world, it will come very natural to you - writing mixins, functions and generally any reusable stuff in .sassis much 'easier' and readable than in .scss(subjective).

• 更干净——如果你来自 Python、Ruby（你甚至可以用类似符号的语法编写道具）甚至 CoffeeScript 世界，这对你来说会很自然——编写 mixin、函数和通常任何可重用的东西.sass都会“更容易” ' 和可读性比 in .scss（主观）。

SASS cons

SASS 的缺点

• whitespace sensitive (subjective), I don't mind it in other languages but here in CSS it just bothers me (issues: copying, tab vs space war, etc).
• no inline rules (this was game breaking for me), you can't do body color: redlike you can in .scss body {color: red}
• importing other vendor stuff, copying vanilla CSS snippets - not impossible but very boring after some time. The solution is to either have .scssfiles (alongside with .sassfiles) in your project or to convert them to .sass.

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

Other than this - they do the same job.

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

Now, what I like to do is to write mixins and variables in .sassand code that will actually compile to CSS in .scssif possible (ie Visual studio doesn't have support for .sassbut whenever I work on Rails projects I usually combine two of them, not in one file ofc).

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

Lately, I'm considering giving Stylusa chance (for a full-time CSS preprocessor) because it allows you to combine two syntaxes in one file (among some other features). That may not be a good direction for a team to take but when you are maintaining it alone - it's ok. The stylus is actually most flexible when syntax is in question.

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

And finaly mixin for .scssvs .sasssyntax comparison:

最后混合用于.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

回答by Blender

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 有两种语法。新的主要语法（从 Sass 3 开始）被称为“SCSS”（意为“Sassy CSS”），是 CSS3 语法的超集。这意味着每个有效的 CSS3 样式表也是有效的 SCSS。SCSS 文件使用扩展名 .scss。

第二种较旧的语法称为缩进语法（或简称为“Sass”）。受到 Haml 简洁的启发，它适用于更喜欢简洁而不是与 CSS 相似的人。它不使用括号和分号，而是使用行的缩进来指定块。虽然不再是主要语法，但将继续支持缩进语法。缩进语法中的文件使用扩展名 .sass。

SASS is an interpretedlanguage that spits out CSS. The structure of Sass lookslike CSS (remotely), but it seems to me that the description is a bit misleading; it's nota replacement for CSS, or an extension. It's an interpreter which spits out CSS in the end, so Sass still has the limitations of normal CSS, but it masks them with simple code.

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

回答by designerNProgrammer

The basic difference is the syntax. While SASS has a loose syntax with white space and no semicolons, the SCSS resembles more to CSS.

基本的区别是语法。虽然 SASS 具有带有空格且没有分号的松散语法，但 SCSS 更类似于 CSS。

回答by Srikrushna

SASS stands for Syntactically Awesome StyleSheets. It is an extension of CSS that adds power and elegance to the basic language. SASS is newly named as SCSS with some chages, but the old one SASS is also there. Before you use SCSS or SASS please see the below difference.

SASS 代表 Syntactically Awesome StyleSheets。它是 CSS 的扩展，为基本语言增添了力量和优雅。SASS 被新命名为 SCSS 并带有一些改动，但旧的 SASS 也在那里。在您使用 SCSS 或 SASS 之前，请查看以下区别。

An example of some SCSS and SASS syntax:

一些 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

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))

Output CSS after Compilation(Same for Both)

编译后输出CSS（两者相同）

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

For more guide you can see the official website.

更多指南可以查看官网。

回答by user3522940

Sass was the first one, and the syntax is a bit different. For example, including a mixin:

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

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

Sass ignores curly brackets and semicolons and lay on nesting, which I found more useful.

Sass 忽略了大括号和分号，并使用嵌套，我发现这更有用。

回答by Shailesh Vikram Singh

Difference between SASS and SCSSarticle explains the difference in details. Don't be confused by the SASS and SCSS options, although I also was initially, .scss is Sassy CSS and is the next generation of .sass.

SASS 和 SCSS的区别文章详细解释了区别。不要被 SASS 和 SCSS 选项混淆，尽管我最初也是如此，.scss 是 Sassy CSS，是 .sass 的下一代。

If that didn't make sense you can see the difference in code below.

如果这没有意义，您可以在下面的代码中看到不同之处。

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

In the code above we use ; to separate the declarations. I've even added all the declarations for .border onto a single line to illustrate this point further. In contrast, the SASS code below must be on different lines with indentation and there is no use of the ;.

在上面的代码中，我们使用 ; 分隔声明。我什至将 .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

You can see from the CSS below that the SCSS style is a lot more similar to regular CSS than the older SASS approach.

您可以从下面的 CSS 中看到，与旧的 SASS 方法相比，SCSS 样式更类似于常规 CSS。

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

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

I think most of the time these days if someone mentions that they are working with Sass they are referring to authoring in .scss rather than the traditional .sass way.

我认为现在大多数时候，如果有人提到他们正在使用 Sass，他们指的是在 .scss 中创作，而不是传统的 .sass 方式。