Sass与SCSS是什么关系？_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Sass与SCSS是什么关系？_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3506字，纯文字阅读大概需要6分钟。

内容图文

当我们说起 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?

内容总结

以上是互联网集市为您收集整理的Sass与SCSS是什么关系？_html/css_WEB-ITnose全部内容，希望文章能够帮你解决Sass与SCSS是什么关系？_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端