sass用法介绍，看这一篇就够了

1.安装Sass
通过命令行工具安装，需要先安装Ruby：
gem install sass
将.scss文件保存成.css文件
sass test.scss test.css
监视单个.scss文件，每次修改此文件时自动编译成.css文件
sass --watch test.scss:test.css
监视整个文件夹，文件夹里的.scss文件变动时自动编译成.css文件
sass --watch app/sass:public/stylesheets
sass提供了四种编译风格
nested: 嵌套缩进的css代码，是默认值
expanded：没有缩进，类似普通手写的css代码
compact: 每个css选择器内容只占一行
compressed: 压缩的css代码，一般用于生产
sass --style compressed test.scss test.css

2.Sass对于css的扩展
2.1 嵌套规则

div {                             
    h1 {
        color: #000; 
    }
}

2.2 属性嵌套，当属性带有相同的命名空间时，比如 font-size、font-weight

div {
	font: {
		family: fantasy;
		size: 20em;
		weight: bold;
	}
}

2.3 引用父选择器，使用&代替最外面的选择器

a {
	&:hover {text-decoration: none}
}

3.SassScript
3.1 变量，以$开头

$border: 1px solid #ccc;
div {
	border: $border;
}

如果变量要使用在属性名或者选择器亦或带引号的字符串中，则需要使用插值写法#{}

$direct: left;
.box {
	border-#{$direct}-raidus: 5px;
}

3.2 运算

$width: 1000px;
div {
	font-size: 10px/8px;
	width: $width/2; //500px
	width: round(1.5)/2;
	height: (500px/2); //250px
	margin-left: 5px + 8px/2px; //9px
	color: #010203 + #040506 //分别计算红、绿、蓝的值 即为：#050709
	color: #010203*2; //#020406
	color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75); //rgba(255, 255, 0, 0.75)
	cursor: e + -resize; //e-resize
}

4.指令
4.1 @import 导入sass文件或者css文件

@import "foo.scss" //后缀名并不是必须的

但如下情况不会导入.scss文件

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

sass允许同时导入多个文件

@import "round", "text"

同时@import也能被嵌套

div {
	@import "example";
}

4.2 @extend 继承

.error {
    border: 1px #000;
    background-color: red;
}
.seriousError {
    @extend .error;
    border-width: 3px;
}

一个较为完整的例子

.error {
    border: 1px #f00;
    background-color: #fdd;
}
.seriousError {
    @extend .error;
    border-width: 3px;
}
.criticalError {
    @extend .seriousError;
    position: fixed;
    top: 10%;
    bottom: 10%;
    left: 10%;
    right: 10%;
}

4.3 @mixin 混合指令

@mixin left {
    float: left;
    margin-left: 10px;
}

使用@include指令调用这个mixin

div {
    @include left;
}

当然也可以在最外层引用mixin

@include left; //即为left

@mixin可以嵌套

@mixin compound {
    @include left;
}

mixin可以传参和指定默认值

@mixin left($value: 10px) {  
     float: left;
     margin-right: $value;
}

使用的时候可以传入参数，不传则使用默认值

div {
    @include left(20px);
}

5.指令的高级用法
5.1 @if @else @else if

$type: monster;
p {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
 }

5.2 @for
@for $var from start through end 或者 @for $var from start to end
其中 $var可以是任意变量 start和end都只能是整数,through包含了start和end，to包含start不包含end

@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
}
//编译后
.item-1 {
     width: 2em; 
}
.item-2 {
     width: 4em; 
}
.item-3 {
     width: 6em; 
}

5.3 @each
@each $var in list
$var可为任意变量 list是由逗号分隔的值列表

@each $animal in puma, sea-slug, egret, salamander {
    .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
    }
}
//编译后
.puma-icon {
     background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
     background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
     background-image: url('/images/egret.png'); 
}
.salamander-icon {
     background-image: url('/images/salamander.png'); 
}

5.3 @function函数指令

$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
	@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
//编译后
#sidebar {
    width: 240px; 
}