阮一峰<SASS用法指南>(简单入门)
结一<sass语法>(较为详细)

1.安装Ruby

windows可用RubyInstaller一键安装
RubyInstaller 下载有点慢，be patient！

rubyinstaller安装.png
记得把第二个给选了

安装完成后记得重启cmd,使用ruby -v 查看是否安装成功。

2.安装sass

在cmd中输入gem install sass

3.关于sass与scss文件

这两种的区别在于.sass文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号。原文地址

个人认为sass虽然比较简洁，但是并不符合大多数语言的编码习惯，而scss和css比较像，可读性较高，因此选择scss

scss:

.a {  
  color: blue;  
  font-weight: bold;  
  text-decoration: underline;  
  .b {  
      color:black;  
  }  
}  

sass:

.div  
   color: blue  
   .b  
      color: black  
      font-weight: bold  
      text-decoration: none  
   .c  
      color: white  

4.基本语法

创建一个scss文件， test.scss

变量：

$bule: #1875e7;
$size: 10px !default;
.blue-font{
    color: $blue;
    font-size: $size;
}
.blue-font{
    font-size:15px;
}

字符串：

$side: left;
.rounded{
    border-#{$side}-radius: 5px;
}

计算：

$twopx: 2px;;
.left-4px{
    margin-left: $twopx * 2;
}

嵌套(border后有：)：

.nest{
    h1{
        color:red;
        border:{
            width: 1px;
            color: red;
            style: solid;
        }
    }
}

嵌套中&表示父元素：

a {
    &:hover { color: #ffb3ff; }
}

注释：

//这种注释编译后不会保留
/* 这是重要注释，编译后会保留 */

继承：

.extend1 {
    border: 1px solid #ddd;
}
.extend2 {
    @extend .extend1;
    font-size:120%;
}

Mixin:

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

.include-div {
    @include mixin-left(20px);
}

颜色函数：

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

插入文件：

@import "path/filename.scss";
@import "foo.css";

5.高级语法

判断：

$value: 3;
.judge-p {
    @if $value == 3 {
        background-color: #000;
    } @else {
        background-color: #fff;
    }
}

循环：

for：

@for $i from 1 to 10 {
    .border-#{$i} {
    　border: #{$i}px solid blue;
　}
}

while:

$wi: 6;
@while $wi > 0 {
    .item-#{$wi} { width: 2em * $wi; }
  $wi: $wi - 2;
}

each:

@each $member in a, b, c, d {
    .#{$member} {
        background-image: url("/image/#{$member}.jpg");
    }
}

自定义函数：

@function double($n) {
    @return $n * 2;
}
#sidebar {
    width: double(5px);
}

6. 编译

打开cmd, 在test.scss目录下sass test.scss test.css回车，即生成test.css