SASS是Syntactically Awesome Stylesheete 的缩写，它是css的一个开发工具，提供了很多便利和简单的语法，让css看起来更像是一门语言，这种特性也被称为“css预编译”。它的主要设计思想是让我们可以按照编程的思路编写自己的样式，然后通过“编译器”生成我们所需要的css文件。sass并不是css的替代品，它只是让css变得更加高效、可维护，也不必去修改编译后的css文件。
一、安装sass
sass是基于ruby的产物，因此在安装sass前需要先安装ruby：https://www.ruby-lang.org/zh_cn/downloads/。下载对应系统的版本，一路next即可。安装完成后，在命令行输入ruby
-v可查看ruby版本。
$ ruby -v
ruby 2.0.0p451 (2014-02-24) [x64-mingw32]
安装完ruby后，在命令行输入gem
install sass即可安装sass，安装完后可通过sass
-v来查看sass版本。
$ sass -v
Sass 3.3.5 (Maptastic Maple)
sass有两种可选的文件后缀.sass和.scss，两者的主要区别就是在书写格式上。
.sass文件是缩进式的写法，对格式要求比较严谨，末尾不能有分号
.test
margin: 5px 10px
font-size: 14px
color: #333
.scss文件的写法和css一致
.test {
margin: 5px 10px;
font-size: 14px;
color: #333;
}
SASS文件的后缀为.scss，可以使用下面的命令将scss文件编译为最终使用的css文件：
sass demo.scss
或者指定css文件名
sass demo.scss product.css
也可以设置输出css文件的风格
sass --style compressed test.scss test.css
输出样式的风格可以有四种选择，默认为nested
sass --watch test.scss:test.css
sass --watch src:dest
SASS支持变量的定义，你可以使用$来定义一个变量，这样我们就可以把一些公用的样式定义为一个变量，在使用时直接引用即可：
$white:#fff;
$font12:12px;
.menu{
color: $white;
font-size: $font12;
}
编译后：
.menu {
color: white;
font-size: 12px;
}
如果在字符串中引用变量，则需要将变量名写在#{}中。如：
$img-dir: "public/images/";
.test {
background-image: url(#{$img-dir}icon.png);
}
可以设置默认变量提供SASS默认值，它的含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用默认值。这在书写sass库文件时非常有用。设置默认变量的方法也非常简单，只需在变量值后加上!default即可。
$color: #ccc;
$color: #000 !default;
p {
color: $color;
}
SASS还支持多值变量
$colors: #fff #ccc #999 #666 #333;
我们可以通过length($colors)来获取多值变量的值的个数，通过nth($colors,
index)来获取第index个位置的值。ps: index的取值范围为1到length($colors)。
$colors: #fff #ccc #999 #666 #333;
p::after {
content: "#{length($colors)}"; // 5
color: nth($colors, 1); // #fff
}
SASS支持两种嵌套方式：选择器嵌套和属性嵌套。嵌套极大程度上降低了选择器名称和属性的重复书写。
.header{
.logo{
display: block;
border: none;
}
ul li{
line-break: normal;
}
}
编译后：
.header .logo {
display: block;
border: none;
}
.header ul li {
line-break: normal;
}
也可以通过&来表示父元素选择器，比如我们声明一个a标签的样式：
a{
text-decoration: none;
&:hover{
color: #007998;
}
}
编译后：
a {
text-decoration: none;
}
a:hover {
color: #007998;
}
h3{
font:{
size:26px;
weight:normal;
family:arial
}
}
编译后：
h3 {
font-size: 26px;
font-weight: normal;
font-family: arial;
}
css有一个不太常用的特性，即@import导入功能，它允许在一个css文件中导入其他css文件。然而，结果是只有执行到@import规则时，浏览器才会去下载其他css文件，这会导致页面样式加载特别慢，从而容易出现页面闪的问题。
sass也有@import导入规则，与css不同的是，sass中的@import规则会在生成css文件时，把相关的文件导入合并成一个文件，而无需浏览器去下载其他的文件。另外在被导入文件中定义的变量等也可以在导入文件中正常使用。
在使用@import导入sass文件时，可以省略sass文件的后缀名.sass或.scss，例如：
- a.scss
body {
background-color: #f00;
}
- style.scss
@import "a";
div {
color: #333;
}
编译后的style.css文件内容如下:
body {
background-color: #f00;
}
div {
color: #333;
}
如果你是编译整个sass目录的话，会发现一个问题，在生成style.css的同时也生成了一个a.css，这个结果并不是我们想要的，a.scss作为一个中间文件，一般情况下是不需要在生成css的。sass开发者也考虑到了这点，我们只需要在文件名前加上下划线_，sass编译的时候就会忽略这个文件，@import引用的时候可以加下划线引用，也可以不加。还是上面的例子，我们可以进行修改：
- _a.scss
body {
background-color: #f00;
}
- style.scss
@import "a";
div {
color: #333;
}
当然，如果你需要像原生css那样去导入其他的css文件，也是可以的，如果符合以下三条中的任意一种情况，sass就会认为你想用css原生的@import:
.css结尾@import
url(...)方式去导入文件
sass支持原生css的注释格式/*
注释内容 */，同时也支持类似js中的单行注释//
注释内容。对于单行注释，sass会在生成的css文件中删除单行注释，只保留css原生的注释内容，例如：
.test {
margin: 10px; // 这块注释不会出现在生成的css文件中
color: #333; /* 这块注释会出现在生成的css文件中 */
}
当然，如果你把多行注释写在原生css不允许的地方时，在编译生成css文件时，sass会将这些注释抹掉。例如：
.test {
padding /* 这块注释不会出现在生成的css文件中 */: 10px
margin: 5px /* 这块注释也不会出现在生成的css文件中 */ 10px;
}
SASS中，你可以对属性值进行简单的运算， 比如：
$white:#fff;
$font12:12px;
.newsize{
font-size: $font12 + 2;
color:$white - #007998;
}
编译后生成：
.newsize {
font-size: 14px;
color: #ff8667;
}
当然除了最基本的加减乘除运算函数，SASS还提供了很多其他有趣的函数，像我们最常用的颜色函数lighten（减淡）和darken（加深）。
.lgt{
color: lighten($black,10%);
background-color: darken($white,50%);
}
编译后可以得到一个运算好的颜色值：
.lgt {
color: #1a1a1a;
background-color: gray;
}
更多的函数信息，请查看SASS官方函数大全
sass中的混合器一般用来解决大段代码重复的问题。比如我们经常使用的单行文本溢出显示省略号，可以使用@mixin来定义一个简单的混合器：
@mixin ellipsis {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
然后在需要用到的地方我们可以通过@include来使用这个混合器：
.text {
@include ellipsis;
}
输出的css为：
.text {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
混合器不仅可以实现代码的重复利用，还可以传递参数，根据需要生成不同的css。这在跨浏览器的css3兼容方面尤为好用。例如：
@mixin radius($value) {
-moz-border-radius: $value;
-webkit-border-radius: $value;
border-radius: $value;
}
使用时，我们只需传入相应的参数值即可。
.test {
@include radius(3px);
}
生成的css为：
.test {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
另外我们还可以给参数提供默认值，如：
@mixin link-colors($normal: #333, $hover: $normal, $visited: $normal) {
color: $normal;
&:hover {
color: $hover;
}
&:visited {
color: $visited;
}
}
调用时，可以传参，也可以不传：
.text {
@include link-colors;
}
.error {
@include link-colors(red);
}
a {
@include link-colors(blue, green, yellow);
}
生成的css为：
// 鉴于篇幅问题，已将生成的代码改成单行
.text { color: #333;}
.text:hover { color: #333;}
.text:visited { color: #333;}
.error { color: red;}
.error:hover { color: red;}
.error:visited { color: red;}
a { color: blue;}
a:hover { color: green;}
a:visited {color: yellow;}
7、继承
SASS通过@extend实现继承
.pclass{
border: 4px solid #ff9aa9;
}
.subclass{
@extend .pclass;
border-width: 2px;
}
编译后：
.pclass, .subclass {
border: 4px solid #ff9aa9;
}
.subclass {
border-width: 2px;
}
这种继承虽然方便，但是也有一定的弊端。比如我们仅仅想继承.pclass类中的样式，而实际并不需要.pclass的这个类。换句话说就是我们的html中并没有class="pclass"这样的代码，这样的话生成的css中的.pclass其实就是多余的。
对于这种情况，sass3.2.0及以后的版本也给我们提供了解决方案：占位选择器%。
占位选择器的优势在于：声明之后，如果不调用，则不会产生类似.pclass的多余css代码。占位选择器通过%标识来定义，也是通过@extend来调用。
%pclass{
border: 4px solid #ff9aa9;
}
.subclass{
@extend %pclass;
border-width: 2px;
}
生成的css为：
.subclass {
border: 4px solid #ff9aa9;
border-width: 2px;
}
sass中的@if语句和js中的if很相似。可以单独使用，也可以配合@else使用。
$lte7: true; // 是否支持ie7以下版本
$theme: yellow;
.clearfix {
@if $lte7 {
zoom: 1;
}
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
body {
@if $theme == red {
background: rgba(255, 0, 0, 0.5);
} @else if $theme == yellow {
background: rgba(255, 255, 0, 0.5);
} @else if $theme == black {
background: rgba(0, 0, 0, 0.5);
}
}
生成css为：
.clearfix {
zoom: 1;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
body {
background: rgba(255, 255, 0, 0.5);
}
三目运算符的语法为：@if($condition,
$condition_true, $condition_false)，例如：
$fontBold: true;
.title {
font-weight: if($fontBold, bold, normal);
}
生成的css为
.title {
font-weight: bold;
}
SASS工具：
原文：http://blog.csdn.net/u011043843/article/details/44537325