从语言主页

Sass有两种语法。新干线语法（从Sass 3开始）被称为“SCSS”（代表“Sassy CSS”），是CSS3语法的超集。这意味着每个有效的CSS3样式表都是有效的SCSS。SCSS文件使用扩展名.scs。第二种更古老的语法称为缩进的语法（或只是“Sass”）。灵感来自Haml的简洁适合喜欢的人简洁而不是与CSS的相似性。它不是括号和分号，而是使用行的缩进来指定块。虽然不再是主语法，缩进语法将继续得到支持。文件夹在缩进语法中，使用扩展名.sas。

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

SASS和SCSS文章之间的差异在细节上解释了差异。不要被SASS和SCSS选项所迷惑，尽管我最初也这么认为，.scs是Sassy CSS，是.sas的下一代。

如果这不合理，您可以在下面的代码中看到差异。

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

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

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

在上面的代码中，我们使用；将声明分开。为了进一步说明这一点，我甚至将.bborder的所有声明都添加到了一行中。相反，下面的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样式与传统的SASS方法相比更类似于常规CSS。

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

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

我认为这些天大多数时候，如果有人提到他们正在与Sass合作，他们指的是在.scs中创作，而不是传统的.sas方式。

Sass（语法上很棒的样式表）有两种语法：

更新版本：SCSS（Sassy CSS）以及一个更古老的、原始的：indent语法，这是原始的Sass，也称为Sass。

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

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

scs：

语法类似于CSS（以至于每个常规有效的CSS3都是有效的SCSS，但在另一个方向上的关系显然不会发生）使用大括号｛｝使用分号；分配标志为：要创建mixin，它使用@mixin指令要使用mixin，请在其前面使用@include指令文件的扩展名为.scs。

原始Sass：

语法类似于Ruby无大括号无严格缩进无分号分配符号为=，而不是：要创建混合，它使用=符号要使用mixin，请在其前面加+号文件的扩展名为.sass。

有些人更喜欢Sass这一原始语法，而另一些人更喜欢SCSS。无论如何，但值得注意的是，Sass的缩进语法从未被弃用，也永远不会被弃用（web存档）。

sass转换：

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

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

Sass和SCSS文档

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

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

在scs中，语法更像CSS，但随着获得更多选项，如：嵌套、声明等，类似于less和其他预处理CSS。。。

它们基本上做了相同的事情，但我用每一行中的几行来查看语法差异，看看{}；，和空格：

SASS：

$width: 100px
$color: green

div
  width: $width
  background-color: $color

scs：

$width: 100px;
$color: green;

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

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

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

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

Sass.Sass文件在视觉上与.scs文件不同，例如。

Example.sass-sass是较旧的语法

$color: red

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

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

Example.scss-sassycss是Sass 3的新语法

$color: red;

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

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

只要将扩展名从.CSS更改为.scs，任何有效的CSS文档都可以转换为SassyCSS（SCSS）。