1.安装Ruby

windows可用一键安装

RubyInstaller 下载有点慢，be patient！记得把第二个给选了

安装完成后记得重启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%) // #d6d65cdarken(#cc3, 10%) // #a3a329grayscale(#cc3) // #808080complement(#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