Sass和SCSS之间的不同之处
这是2014年4月28日发布的文章的更新版本
我已经在(http://www.sitepoint.com/author/hgiraudel/) 里写了很多关于Sass，但有一些意见明确表示，并不是每个人都知道Sass所指的是什么。这里有一点清晰：
当我们在讨论Sass时，我们通常将预处理器和语言作为一个整体。我们常说，例如，“我们正在使用Sass”，或者“这是Sass mixin”。同时，Sass（预处理器）允许两种不同的语法:
- Sass, also known as the indented syntax
- SCSS, a CSS-like syntax
Sass的历史
最初，Sass是由Ruby开发人员设计和编写的另一个名为[Haml]（http://haml.info/）的预处理程序的一部分。因此，Sass样式表使用的是不带括号、不含分号和严格缩进的Ruby类语法，像这样：
代码语言：javascript复制// 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)正如你所看到的，这与普通的CSS相比有很大的变化。即使你是一个Sass（预处理器）的用户，你可以看到这与我们通常的习惯是非常不同的。可变符号是“！”而不是“$”,分配符号是“=”而不是“：”。很奇怪。
但是，Sass看起来就像这样，直到3.0的版本在2010年5月问世，为Sassy CSS引入了一种名为SCSS的全新语法。
代码语言：javascript复制// 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维护者也努力通过缩减语法将“！”（可变符号）和“=”（赋值符号）从SCSS移到“$”和“：”使两种语法更接近。 Now, when starting a new project, you may wonder which syntax you should use. Let me enlighten the path and explain the pros and cons of each syntax.
Sass缩进语法的优点
虽然这种语法可能看起来很奇怪，它有一些有趣的观点。首先，它是更短，更容易打字。没有大括号和分号，你不再需要所有的东西。更好。当单个字符“=”和“ ”足够时不需要“@mixin”或者 “@include”。
另外Sass语法通过依靠缩减来执行清洁编码标准。因为一个错误的缩减可能会破坏整个“.sass”样式表,所以它确保编码始终保持干净且格式良好。有一种编写Sass代码的方法：好方法。
但要小心！在Sass中缩进means something。当缩进一个选择器时，这意味着它嵌套在上一个选择器中。例如：
代码语言：javascript复制.element-a
color: hotpink
.element-b
float: left… will output the following CSS:（将输出以下CSS）
代码语言：javascript复制.element-a {
color: hotpink;
}
.element-a .element-b {
float: left;
}简单的事实推理将“.element-b”放在同一级的右边，意味着它是“.element-a”的孩子，改变了所得到的CSS。请小心你的缩进。
此外，我觉得基于语法的缩进将可能适合一个Ruby/Python团队而不是PHP/Java团队（虽然这是有争议的，但我乐意听到相反的意见。)
SCSS语法的优点
（对于启动器，它是完全兼容CSS。它意味着，你可以重命名一个“.scss”中的CSS文件并且它将just work。自SCSS发布以来，使SCSS与CSS完全兼容，一直是Sass的维护者的首要任务，这是在我看来很大的一件事。此外，他们试图坚持更接近于那些在将来可能成为一个有效的CSS语法（故@ directives）。
因为SCSS与CSS兼容，这意味着很少没有学习曲线。语法是已知的：毕竟，它只是有一些额外的CSS。当与没有经验的开发者合作时，这很重要：他们可能在一开始不了解什么是Sass的时候就能够快速开始编写。
此外，它更容易阅读，因为它实际上是有意义的。当你读“@mixin”时，你知道这是一个混合声明；当你看到“@include”时，你正在调用mixin。它没有任何快捷方式，一旦读出来，一切都是有意义的。
此外，Sass的大多数现有工具，插件和演示都是用SCSS语法开发的。随着时间的推移，这种语法主要是出于上述原因变得越来越突出并且被默认选择。
最后的想法
这个选择取决于你，但除非你有很好的理由使用缩减语法进行编码，否则我强烈建议使用SCSS胜过Sass.不仅仅在于它更简单，而且它更方便。
我曾尝试过缩减的语法，并且喜欢它。我喜欢它是因为短而且容易。在最后一刻我改变主意之前我实际上正将整个代码库移到Sass。我感谢我过去的自我，以阻止这一举动，因为我们一旦使用缩进语法，它将很难与我们的几个工具一起使用。
此外，请注意Sass永远不是大写字母，无论你是在谈论语言还是语法。同时，SCSS始终是大写字母。需要提醒？SassnotSASS.com可以挽救。
