Sass（五）中文文档1：特色功能、两种格式、使用 Sass、 CSS 功能拓展 （父选择器 `&`、占位符选择器 `%foo`）、注释（单行、多行、！）

Sass（五）中文文档1：特色功能、两种格式、使用 Sass、 CSS 功能拓展 （父选择器 &、占位符选择器 %foo）、注释（单行、多行、！）

总结：

• 注释
  • 多行注释 /* */，会被完整输出到编译后的 CSS 文件中
  • 单行注释 //，不会被完整输出到编译后的 CSS 文件中
  • 将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息

Sass (Syntactically Awesome StyleSheets)

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

1. 特色功能 (Features)

• 完全兼容 CSS3
• 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
• 通过函数进行颜色值与属性值的运算
• 提供控制指令 (control directives)等高级功能
• 自定义输出格式

2. 语法格式 (Syntax)

Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。

另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 “Sass”，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，具体请查看 the indented syntax reference。这种格式以 .sass 作为拓展名。

任何一种格式可以直接 导入 (@import) 到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式：

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

3. 使用 Sass (Using Sass)

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

更多命令的用法请通过 sass --help 获取帮助。

在 Ruby 中使用 Sass 也非常容易，Sass gem 安装完毕后运行 require "sass" 然后按照下面的方法使用 Sass::Engine：

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> "#main { background-color: #0000ff; }\n"

3.1. Rack/Rails/Merb Plugin

在 Rails 3 之前的版本中使用 Sass，需要在 environment.rb 文件中添加：

config.gem "sass"
</