Sass

1.安装：
1）安装ruby，
2）更换gem源，尝试了一下中文网那个淘宝源不好使。在网上找了其他的：gem sources -a http://gems.ruby-china.org
但是gem sources -1还是不能打印出来，不过直接进行安装gem install sass, 显示安装成功。
install compass，显示安装成功。


2.编译sass
1）命令行编译：sass input.scss output.css
2）koala编译


3.基本语法：
1）文件后缀名：.sass, .scss。scss相对对于格式要求较松。
2）导入：@import，将@import的scss文件合并只生成一个css文件。
命名：_mixin.scss，寄出的文件命名以_开头，文件导入时可以不写下划线。@import "mixin".
2）注释：标准css注释:/**/或//
3）变量：变量必须以$开头，后面紧跟变量名。变量值与变量名之间用冒号分开。
a）普通变量：定以后可全局使用，

$fontSize: 12px;
body{
    font-size:$fontSize;
}

b）默认变量：仅需在值后面加上！default

$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

c）特殊变量：定义的变量是属性值。但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;

//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

d）多值变量：list或map类型。

list

//sass style
//-------------------------------
$linkColor:         #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}

map

//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

4. 嵌套

1）选择器的嵌套：一个选择器集成另一个选择器

2）属性嵌套：当属性有相同的开始单词时，嵌套。

5.混合

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

//sass style
//-------------------------------
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

//css style
//-------------------------------
.demo{
    margin-left:auto;
    margin-right:auto;
}

mixin也可以带有参数值。

//sass style
//-------------------------------   
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

//css style
//-------------------------------
.opacity{
  @include opacity; //参数使用默认值
}
.opacity-80{
  @include opacity(80); //传递参数
}

@content用来解决@media的问题

//sass style
//-------------------------------                     
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

//css style
//-------------------------------
@media only screen and (max-width: 480px) {
  body { color: red }
}            

6. 继承：@extend，一个选择器可以继承另一个的样式，而且有不相同的样式时，可以对样式进行重写。

//sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

//css style
//-------------------------------
h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

7.占位选择器。避免冗余，对基础样式的处理，在基础验前加上%，通过extend调用。

//sass style
//-------------------------------
%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}

8. 函数：通过@function定义函数。

@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

9. sass可以进行运算，运算符前后有空格，否则会报错。

10.条件判断及循环：

1）@if，@else。

2）三目判断：if($condition, $if_true, $if_false)

3）for循环：@for $var from <start> through <end>和@for $var from <start> to <end>。这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

//sass style
//-------------------------------
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//css style
//-------------------------------
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

4）@each：@each $var in <list or map>

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

代码参考：https://github.com/YZlingyu/teambition/blob/master/css/index.scss