Sass 是什么？
安装
Sass 是 Ruby 语言写的，但是两者的语法没有关系。不懂 Ruby，照样使用。不过必须要先安装 Ruby，然后再安装 Sass。
ruby 安装
先从官网下载并安装 ruby，在安装的时候，请勾选 Add Ruby executables to your PATH 这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到 ruby 环境。
Downloads - 官网
sass 安装
安装完 ruby 之后，在开始菜单，找到刚才安装的 ruby，打开Start Command Prompt with Ruby
然后直接在命令行输入：
gem install sass
按回车键确认，等待一段时间就会提示你 Sass 安装成功（如果因为墙的原因安装失败，请参考下面用淘宝 RubyGems 镜像安装 Sass）。
淘宝 RubyGems 镜像安装 Sass
由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。
这时候我们可以通过source命令来配置源，先移除默认的https://rubygems.org源：
gem source --remove https://rubygems.org/
然后添加淘宝的源https://ruby.taobao.org/:
gem source -a https://ruby.taobao.org/
然后查看一下当前使用的源是哪个，如果是淘宝的，则比表示可以输入 Sass 安装命令gem install sass了。
最后使用版本查看命令确保安装成功：
sass -v
Sass 安装 - W3CPlus
编译
SASS 文件就是普通的文本文件，里面可以直接使用 CSS 语法。文件后缀名是 .scss，意思为 Sassy CSS。
新建一个 test.scss 文件，内容为：
$blue : #1875e7;div{ color: $blue;} 然后在命令行输入下面命令，屏幕上便显示 .scss 文件转化的 css 代码：
sass test.scss
如果要将显示结果保存成文件，后面再跟一个 .css 文件名：
sass test.scss test.css
那么就会默认在当前目录下生成文件。
Sass 提供四个编译风格的选项：
nested: 嵌套缩进的css代码，它是默认值；
expanded: 没有缩进的、扩展的css代码；
compact: 简洁格式的css代码；
compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。
sass --style compressed test.scss test.min.css
你还可以让 Sass 监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
// 监听文件// input.scss : scss文件// output.css : 编译后的css文件sass --watch input.scss:output.css// 监听目录 // sassFileDirectory : sass文件目录// cssFileDirectory : 编译后的css文件目录sass --watch sassFileDirectory:cssFileDirectory
Sass 编译 - W3CPlus
Sass 的官方网站还提供一个在线转换器，方便尝试运行各种栗子：
SassMeister | The Sass Playground！
基本语法
1.变量
Sass 中可以定义变量，方便统一修改和维护。
//sass style//-----------------------------------$gray: #666;body { background-color: $gray;}//css style//-----------------------------------body { background-color: #666; } 2.嵌套
Sass 可以进行选择器的嵌套，表示层级关系。
//sass style//-----------------------------------ul { li { display: inline-block; }}//css style//-----------------------------------ul li { display: inline-block; } 3.导入
Sass 中如导入其它sass文件，最后编译为一个css文件，优于纯css的@import。
//sass style//-----------------------------------// reset.scsshtml,body,ul,ol { margin: 0; padding: 0;}//sass style//-----------------------------------// test.scss@import 'reset';body { font-size: 100%; background-color: #efefef;}//css style//-----------------------------------html,body,ul,ol { margin: 0; padding: 0; }body { font-size: 100%; background-color: #efefef; } 4.mixin
Sass 中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理 CSS 3 的前缀兼容轻松便捷。
//sass style//-----------------------------------@mixin box-sizing ($sizing) { -webkit-box-sizing: $sizing; -moz-box-sizing: $sizing; -box-sizing: $sizing;}.box-border { border: 1px solid #ccc; @include box-sizing(border-box);}//css style//-----------------------------------.box-border { border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -box-sizing: border-box; } 5.扩展/继承
Sass 可通过 @extend 来实现代码组合声明，使代码更加优越简洁。
//sass style//-----------------------------------.bar-left { border: 1px solid #ccc;}.bar-right { @extend .bar-left; color: #999;}//css style//-----------------------------------.bar-left, .bar-right { border: 1px solid #ccc; }.bar-right { color: #999; } 6.运算
Sass 可进行简单的加减乘除运算等。
//sass style//-----------------------------------$defaultFontSize: 10px;.msg { position: absolute; top: (800px/2); left: 200px + 200px; font-size: $defaultFontSize * 2;}//css style//-----------------------------------.msg { position: absolute; top: 400px; left: 400px; font-size: 20px; } 7.颜色
Sass 中集成了大量的颜色函数，让变换颜色更加简单。
//sass style//-----------------------------------$linkColor: #08c;a { text-decoration: none; color: $linkColor; &:hover { color: darken($linkColor, 10%); }}//css style//-----------------------------------a { text-decoration: none; color: #08c; }a:hover { color: #006699; } 8.注释
Sass 共有两种注释风格。
标准的 CSS 注释 /* comment */，会保留到编译后的文件
单行注释 // comment，只保留在 SASS 源文件中，编译后会被省略。
提示：在/*后面加一个感叹号，表示这是“重要注释”。即使是压缩模式编译，也会保留这行注释。 通常可以用于声明版权 。
/*! 重要注释！*/
管理Sass项目文件结构
CSS 预处理器的特点之一是可以把你的代码分割成很多文件，而且不会影响性能。这都归功于 Sass 的@import命令，只要在你的开发环境下，你调用不管多少文件，最终将编译出一个 CSS 样式文件。
管理 Sass 项目文件结构 - 大漠 - W3CPlus
gulp-ruby-sass 与 gulp-sass
gulp-ruby-sass 是调用 sass，所以需要 ruby 环境，需要生成临时目录和临时文件；
gulp-sass 是调用 node-sass，有 node.js 环境就够了，编译过程不需要临时目录和文件，直接通过 buffer 内容转换。
gulp-ruby-sass与gulp-sass - SegmentFault
More
sass入门 - sass教程
sass|博客自由标签|W3CPlus
Sass->十分钟写一个Sass组件 - SegmentFault
使用Sass来写OOCSS - SegmentFault
以上，欢迎拍砖斧正。
查看更多关于CSS强化装备！Sass整理笔记_html/css_WEB-ITnose的详细内容...