1. Scss 基础使用
1. 语法格式
Sass 有两种语法格式。首先是 SCSS (Sassy CSS) ，这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。
另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 “Sass”，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式这种格式以 .sass 作为拓展名。
任何一种格式可以直接导入 (@import) 到另一种格式中使用，或者通过
sass-convert命令行工具转换成另一种格式
# Convert Sass to SCSS
$ sass-convert style.sass style.scss# Convert SCSS to Sass
$ sass-convert style.scss style.sass
2. 使用方式
Sass 可以通过以下三种方式使用：
- 作为命令行工具；
- 作为独立的 Ruby 模块 (Ruby module)；
- 或者作为 Rack-enabled 框架的插件（例如 Ruby on Rails 与 Merb）。
无论哪种方式都需要先安装 Sass gem （Windows 系统需要先安装 Ruby）
$ gem install sass
在命令行中运行 Sass
$ sass input.scss output.css
监视单个 Sass 文件，每次修改并保存时自动编译
$ sass --watch input.scss:output.css
监视整个文件夹
$ sass --watch app/sass:public/stylesheets
3. CSS 功能拓展
1. 嵌套规则
Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器
main p {color: #00ff00;width: 97%;.redbox {background-color: #ff0000;color: #000000;}
}
编译为
#main p {color: #00ff00;width: 97%;
}#main p .redbox {background-color: #ff0000;color: #000000;
}
2. 父选择器 &
在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，可以用 & 代表嵌套规则外层的父选择器
a {font-weight: bold;text-decoration: none;&:hover { text-decoration: underline; }
}
3. 属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：
.funky {font: {family: fantasy;size: 30em;weight: bold;}
}
编译为
.funky {font-family: fantasy;font-size: 30em;font-weight: bold;
}
4. 注释
Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会
