Sass初认识

Sass定义

CSS 预处理器定义的一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

官方Sass描述

Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)
例如：Sass 语法

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
    font: 100% $font-stack
    color: $primary-color

编译出来的 CSS

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

Sass有新旧语法的区分

1. 最初的语法，用Tab键严格控制缩进，不带任何大括号和分号，文件以“.Sass”为扩展名
2. SCSS 是 Sass 的新语法格式，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。

在HTML中引入的样式文件还是css文件，Sass只作为css的预处理工具，因此需要Sass编译

多种Sass编译方式：

1. 命令编译
2. GUI工具编译
3. 自动化编译

Sass 中样式风格

每个人编写的 CSS 样式风格都不一样，有的喜欢将所有样式代码都写在同一行，而有的喜欢将样式分行书写。在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格：

1. 嵌套输出方式 nested
2. 展开输出方式 expanded  
3. 紧凑输出方式 compact 
4. 压缩输出方式 compressed