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

SCSS有什么不同?应该是同一种语言吗?相像的不同的


当前回答

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

CSS变量是受支持的,可以使用,但不能像预处理器变量一样使用。

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

SCSS语法使用文件扩展名.scs。除了一些小的例外,它是CSS的超集,这意味着基本上所有有效的CSS都是有效的SCSS。由于它与CSS相似,所以它是最容易使用和最流行的语法。

缩进的语法是Sass的原始语法,因此它使用了文件扩展名.Sass。由于这个扩展名,它有时被称为“Sass”。缩进语法支持与SCSS相同的所有功能,但它使用缩进而不是大括号和分号来描述文档的格式。

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

其他回答

SASS是语法上很棒的样式表,是CSS的扩展,它提供了嵌套规则、继承和混合的特性,而SCSS是Sassy级联样式表,它与CSS相似,填补了CSS和SASS之间的空白和不兼容性。它是根据麻省理工学院的许可证颁发的。本文详细介绍了这些差异:https://www.educba.com/sass-vs-scss/

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

CSS变量是受支持的,可以使用,但不能像预处理器变量一样使用。

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

SCSS语法使用文件扩展名.scs。除了一些小的例外,它是CSS的超集,这意味着基本上所有有效的CSS都是有效的SCSS。由于它与CSS相似,所以它是最容易使用和最流行的语法。

缩进的语法是Sass的原始语法,因此它使用了文件扩展名.Sass。由于这个扩展名,它有时被称为“Sass”。缩进语法支持与SCSS相同的所有功能,但它使用缩进而不是大括号和分号来描述文档的格式。

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

基本区别在于语法。虽然SASS的语法松散,没有空格和分号,但SCSS更像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文档