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

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


当前回答

紧凑的答案:

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

以.scs结尾的文件表示Sass支持的标准语法。SCSS是CSS的超集。以.sass结尾的文件表示源于Ruby世界的sass支持的“旧”语法。

其他回答

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

我发现自己也在想同样的事情,在哈佛大学的CS50中偶然发现了一个直截了当的解释:

一种叫做Sass的语言。。。(是)本质上是CSS的扩展。。。它为CSS添加了附加功能。。。只是为了让它更强大一点供我们使用。

Sass的一个关键特性是能够使用变量

Sass扩展名为.scs(与普通css文件的.css不同)。

因此,当我们问“scs和sass之间有什么区别?”时,答案很简单,.scs只是希望使用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是第一个,语法有点不同。例如,包括mixin:

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

Sass忽略了大括号和分号,而专注于嵌套,我发现这更有用。

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

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

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