Sass安装及基本语法

1、什么是Sass？

Sass 是一个 CSS 预处理器。
Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
Sass 完全兼容所有版本的 CSS。
Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass 生成良好格式化的 CSS 代码，易于组织和维护。
Sass 文件后缀为 .scss

2、安装：

NPM 安装
npm install -g sass（国内 npm 建议使用淘宝镜像来安装）

Windows 上安装
我们可以使用 Windows 的包管理器 Chocolatey 来安装
（Windows 系统需要先安装 Ruby）
choco install sass

Mac OS X (Homebrew)安装
Mac OS 可以使用 Homebrew 包管理器来安装
brew install sass/sass/sass

3、编译.scss文件为css文件

运行：sass input.scss output.css

监视单个 Sass 文件，每次修改并保存时自动编译：
sass --watch input.scss:output.css

监视整个文件夹：
sass --watch app/sass:public/stylesheets
例：sass --watch scss:dist/css

4、Sass功能

嵌套规则：
Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

父选择器 &：
用 & 代表嵌套规则外层的父选择器

属性嵌套：
为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

5、sass注释

Sass 支持标准的 CSS 多行注释 /* */加粗样式，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会

6、变量（使用 $）

例：
$width: 5rem;
#main {
width: $width
}