Sass(SCSS)中文手册——入门

简书原文

https://www.jianshu.com/p/e82c27aa05c7

前言

该中文手册是我在Sass中文文档的基础上编辑的，或者也可以理解为就是Sass中文文档的翻版。之所以有这篇文章的原因还是在于Sass中文文档并没有全部翻译成中文，这样每次我查找文档的时候又需要对其再理解一次，与其如此，不如我自己完善这份文档，并且加上一些我自己的理解或者注解，这样以后我查阅的时候可以更好的使用该份文档。同时，我将这篇文章公开出来，当然，如果喜欢看原文的可以去Sass官网看中文文档，这完全没有问题，不可否认，那才是正版，我只是希望我写的东西能帮助到读者，仅此而已。

考虑到写成一篇整体篇幅太大，因此将中文手册分成两篇，这篇只是大概对Sass进行介绍，下篇才是具体的语法。

大纲

1、什么是Sass?
2、为什么使用Sass?
3、Sass和SCSS的区别和联系
4、Sass的安装和使用
5、Sass的输出样式

1、什么是Sass?

Sass (Syntactically Awesome StyleSheets)
CSS(Cascading Style Sheets)(层叠样式表)
Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时。

个人理解：
SASS的出现其实就是换一种方式写CSS，让CSS的编写过程更倾向于一种工程而不是仅仅是样式表，或者正如其名字一样，很棒的具有语法的样式表。

2、为什么使用Sass?

首先，Sass本质上其实就是CSS,只不过使用的方式不同于普通css罢了;其次，Sass在 CSS 语言基础上添加了扩展功能(比如变量、嵌套 (nesting)、混合 (mixin)等等)。
总而言之，Sass在css的基础上,让css变得可读写性更好，使用更加方便，对项目的工程化更加友好。

3、Sass和SCSS的区别和联系

Sass 有两种语法。
第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本。
也就是说，所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。 另外，SCSS 理解大多数 CSS hacks 以及浏览器专属语法，例如IE 古老的 filter 语法。 这种语种语法的样式表文件需要以 .scss 扩展名。

第二种比较老的语法成为缩排语法（或者就称为 "Sass"）， 提供了一种更简洁的 CSS 书写方式。
它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，I 而且也不使用分号，而是用换行符来分隔属性。 很多人认为这种格式比 SCSS 更容易阅读，书写也更快速。使用此种语法的样式表文件需要以 .sass 作为扩展名。

任一语法都可以导入另一种语法撰写的文件中。 只要使用 sass-convert 命令行工具，就可以将一种语法转换为另一种语法：

# 将 Sass 转换为 SCSS
$ sass-convert style.sass style.scss

# 将 SCSS 转换为 Sass
$ sass-convert style.scss style.sass

4、Sass的安装和使用

Sass的安装我这里就不多做介绍了，因为不同的情况不同的项目乃至不同的框架引入的方式各有不同。
当然这里还是要说一个特别好用的网站：Sass的实验室。这是Sass提供的网页，通过这个你就可以不需要项目的前提下实验各种Sass的语法，并且对比Sass以及由Sass编译后的css.

5、Sass的输出样式

虽然Sass输出的默认CSS样式非常好，并且反映了文档的结构，但是品味和需求是不同的，所以Sass支持其他几种样式。
通过设置:style选项或使用—style命令行标志，Sass允许您在四种不同的输出样式之间进行选择。

5.1、嵌套

嵌套样式是默认的Sass样式，因为它反映了CSS样式的结构和样式化的HTML文档。
嵌套样式在查看大型CSS文件时非常有用:它允许您轻松掌握文件的结构，而无需实际读取任何内容。
每个属性都有自己的行，但是缩进不是常量。每个规则都是根据嵌套的深度缩进的。例如:

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

5.2、展开

展开是一种更典型的人工CSS样式，每个属性和规则占用一行。属性在规则中是缩进的，但是规则没有以任何特殊方式缩进。例如:

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

5.3、紧凑

紧凑样式比嵌套或展开样式占用更少的空间。它还将焦点更多地吸引到选择器，而不是它们的属性。每个CSS规则只占用一行，其中定义了该行上的每个属性。嵌套规则彼此相邻，没有换行符，而单独的规则组之间有换行符。例如:

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

5.4、压缩

压缩样式占用尽可能少的空间，除了分隔选择器和文件末尾的换行符所必需的空白之外，没有其他空白。它还包括一些其他的小压缩，例如为颜色选择最小的表示。这并不是为了让人读懂。例如:

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}