Sass 与 SCSS 是什么关系？

我最近写了不少 Sass 代码，可是最近发现并非每个人都知道 Sass 具体是什么。下面是一个简短的说明：

当咱们提及 Sass ，咱们常常指的是两种事物：一种 css 预处理器和一种语言。咱们常常这样说，“咱们正在使用 Sass”，或者 “这是一个 Sass mixin”。同时，Sass （预处理器）有两种不一样的语法：

• Sass,一种缩进语法

• SCSS,一种 CSS-like 语法

历史

最开始，Sass 是Haml的一部分，Haml 是一种预处理器，由 Ruby 开发者设计和开发。由于这样，Sass 使用相似 Ruby的语法，没有花括号，没有分号，具备严格的缩进，就像这样：

// 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（预处理器） 用户，你也会发现这和你正在使用的有很大的差异。变量的标志用 !，而不是$,分配符是=而不是:。很是怪异。

可是在2010年五月以前，Sass 就是这个样子的。2010年5月，官方推出了一个全新的语法，被叫作 SCSS，意思是 Sassy CSS。这个语法带来了对 CSS 友好的语法，试图弥合 Sass 和 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 维护者作了大量的工做，把缩进语法中的!和=换成了 SCSS 中的 $ 和 :。

如今，在开始一个新项目时，你也许疑惑要用哪一种语法。让咱们来看看两种语法的优劣。

Sass缩进语法的优劣

虽然语法看起来怪异，可是缩进语法有不少有趣的点。首先，它 更短而且更易于书写。没有花括号，没有分号，你彻底不须要这些东西。更好的是，你甚至不须要@mixin 或者 @include, 一个字符就足够了：= 和 +。

同时 Sass 经过严格的缩进来强制 clean coding standards。由于一个错误的缩进就会破坏整个.sass文件，这使得整个代码老是clean 和格式良好的。只有一种写 Sass 代码的方式：正确的方式。

可是请注意！缩进在 Sass 中是有意义的。当你缩进了一个元素，这意味这你将它变为了以前元素的子元素。好比:

.element-a
    color: hotpink

    .element-b
        float: left

以上会输出下面的 CSS 代码：

.element-a {
    color: hotpink;
}

.element-a .element-b {
    float: left;
}

将 .element-b 向右一格觉得着它变成了 .element-a 的子元素，改变了输出 CSS 代码的结果。因此必定要当心你的代码缩进。

另外，我以为基于缩进的语法适合于 Ruby/Python 团队，而不适合 PHP/Java 团队。（这是值得商榷的，我也但愿听到不一样的声音）

SCSS语法的优劣

对于初学者，SCSS 是彻底和 CSS 兼容的，这意味着几乎为零的学习曲线。SCSS语法便是：它只是加了一些功能的 CSS。当你和没经验的开发者一块儿工做时这很重要：他们能够很快开始编码而不须要首先去学习Sass。

此外，SCSS 仍是 易于阅读 的，由于它是有语义的，而不是用符号表示。当你读到 @mixin，你就会知道这是一个 mixin 声明；当你看到 @include ，你就是在引用一个 mixin。他并无用任何缩写，当你大声读出来时全部的都很明了。

还有，如今几乎全部 Sass 的工具，插件和 demo 都是基于 SCSS语法来开发的。随着时间过去，SCSS 会变成你们首选的选择。好比，你如今很难找到一个 Sass 缩进语法的高亮插件，一般都只有 SCSS 的能够用。

总结

如何选择取决于你，可是除非你有很好的理由必定要使用缩进的语法，我强烈推荐使用 SCSS 。不只仅它很简单，同时他也很方便。

最后请注意 Sass 历来没有大写过，不管你指的是语法或者这个语言。同时， SCSS 一直是大写的。甚至有一个网站专门来提醒你这件事!

翻译自What’s the Difference Between Sass and SCSS?