Sass简介
css并非一门真正的“编程”语言，它没有变量，无法嵌套、循环等。为了解决css的不足，开发者们在css中加入编程元素，这就是css预处理器。基本思想是，用一种专门的编程语言作为预处理的“中间语言”，进行网页样式设计，再编译成css文件。
sass是采用Ruby语言编写的一款css预处理语言。sass因其一开始的缩进式语法使用率不高，从sass第三代开始，放弃了缩紧式风格，完全向下兼容普通的css代码，也被称为scss。
sass文件有两种后缀名：“.sass” 和 “.scss”。“.sass”是sass语言文件的扩展名后缀，“.scss”是scss语言文件的扩展后缀名。两者功能特性一样，但书写规则不同。“.sass”文件对代码的排版有非常严格的要求。
我们来对比一段同样效果的样式写法：
css写法
/*------ css -------*/
.box{
color: blue;
font-weight: bold;
text-decoration: underline;
}
.box .item{
color: black;
}
scss写法
/*------ scss -------*/
.box{
color: blue;
font-weight: bold;
text-decoration: underline;
.item {
color:black;
}
}
sass写法
/*------ sass -------*/
.box
color: blue;
font-weight: bold;
text-decoration: underline;
.item
color: black;
所以可见scss更常用，更符合css书写习惯，推荐使用scss。
Mac OS 系统下安装 Sass
sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。Mac下自带Ruby，无需再安装。Windows系统需先安装Ruby，可以前往 Windows系统下安装sass 查看步骤。
输入命令：
gem install sass
如遇权限问题：
ERROR: While executing gem ... (Gem::FilePermissionError) You don‘t have write permissions for the /Library/Ruby/Gems/2.0.0 directory. // mac安装遇到权限问题 sudo gem install sass
安装成功：
1 gem installed
sass更新、查看版本、帮助命令：
//更新sass gem update sass //查看sass版本 sass -v //查看sass帮助 sass -h
Sublime text 2 配置 Sass 环境
Sublime Text 2的强大之处在于简洁的界面下面有一套强大的插件。若要在Sublime Text 2下开发Sass，我们需要先安装两个插件。
1、Sass插件，用来语法高亮显示Sass源文件。
2、Sass Build插件，用来编译Sass文件，前提是已经安装好了Ruby环境与sass.gem。
安装sass、sass bulid的前提是已经安装了Package Control，如还未安装，请先移步完成Package Control安装 。
1. command+shift+p 打开命令面板
a) 在命令栏中输入”install”然后回车，继续在命令栏中输入”Sass”然后回车，然后在弹出的列表中选择Sass插件，通过鼠标单击或者回车进行安装，可通过左下角状态栏查看安装结果
b) 在命令栏中输入”SassBuild"然后回车，然后在弹出的列表中选择Sass插件，通过鼠标单击或者回车进行安装，可通过左下角状态栏查看安装结果
也可以直接将下载的压缩包，解压后放到Sublime Text 2目录下的data/Packages目录下面来进行安装。
2. 创建test.scss
$color: #369;
body {
background: darken($color, 10%);
}
按Command+B进行编译，如果安装了sass编译环境，这时候应该在下面的console中显示编译结果。
如编译出现如下问题：
Error: Invalid US-ASCII character "\xE2"
表示.scss文件中出现了中文字体，编码错误，只需要引入utf-8，就可解决：
@charset "UTF-8";
编译成功，文件夹中将多一个test.css文件
SASS的官方网站，提供了一个在线编辑器SassMeister，你可以在那里，试运行各种例子。
3. HTML中只要正常引入 test.css 就行了
scss与css的区别就在于：css是经过scss编译生成的，并不是直接编写的。scss的用法与优势将在下一章说明。
/*此随笔内容根据网上内容整理而成。如有侵权，表示歉意，请告知于我。*/
参考内容：
［2］ sass中国
［3］sass技术中后缀名.sass和.scss的区别与个人推荐