Sass和SCSS的区别比较

Sass提供了两种不同的语法：

萨斯
SCSS

【Sass和SCSS的区别比较】两者是相似的并且做相同的事情, 但是写法不同。 SCSS是最新的一种, 被认为比Sass更好。
SASS和SCSS之间的区别Sass：Sass来自另一个称为Haml的预处理器。它是由Ruby开发人员设计和编写的, 因此, Sass样式表使用类似Ruby的语法, 没有大括号, 没有分号和严格的缩进。在Sass中, 可变符号为！而不是$和分配符号是=而不是：。
请参阅以下示例：

// Variable !primary-color= hotpink// Mixin =border-radius(!radius) -webkit-border-radius= !radius -moz-border-radius= !radius border-radius= !radius.my-element color= !primary-color width= 100% overflow= hidden.my-other-element +border-radius(5px)

SCSS：SCSS提供CSS友好的语法来缩小Sass与CSS之间的距离。 SCSS称为Sassy CSS。
请参阅以下示例：

// Variable $primary-color: hotpink; // Mixin @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }.my-element { color: $primary-color; width: 100%; overflow: hidden; }.my-other-element { @include border-radius(5px); }

在这里, 你可以看到SCSS绝对比Sass更接近CSS。
Sass语法的优点：
Sass的语法与CSS完全不同, 但是更短, 更容易键入。当一个字符就足够时, 你无需键入分号或大括号, 甚至无需使用@mixin或@include：=和+。
它也提供了简洁的编码标准, 因为它遵循缩进语法。
SCSS语法的优点：
它与CSS完全兼容。你可以将CSS文件重命名为.scss扩展名, 该文件也将起作用。由于它遵循CSS语法的原因, 因此非常易于学习和使用。