Sass语法：

众所周知，css不是一门编程语言。他没法像js和python那样拥有逻辑处理的能力，甚至导入其他的css文件中的样式都做不到。而Sass就是为了解决css的这些问题。他它允许你使用变量、嵌套规则、 mixins、导入等众多功能，并且完全兼容css语法。Sass文件不能直接被网页所识别，写完Sass后，还需要专门的工具转化为css才能使用。

Sass文件的后缀名：

Sass文件有两种后缀名，一个是scss，一个是sass。不同的后缀名，相应的语法也不一样。这里我们使用scss的后缀名。包括后面讲到的Sass语法，也都是scss的后缀名的语法。

使用gulp将Sass转换为css：

将Sass文件转换为css文件的工具有很多。这里我们就使用之前讲过的gulp来实现。这里我们需要使用gulp-sass插件来帮我们完成。安装方式非常简单：npm install gulp-sass --save-dev。那么处理sass的代码如下：

var gulp = require("gulp");
var sass = require("gulp-sass");
// 处理css的任务
gulp.task('css',function () {
    gulp.src(path.css + '*.scss')
        .pipe(sass().on("error",sass.logError))
        .pipe(cssnano())
        .pipe(rename({"suffix":".min"}))
        .pipe(gulp.dest(path.css_dist))
});

Sass基本语法：

注释：

支持/* comment */和// 注释两种方式。

嵌套：

Sass语法允许嵌套。比如#main下有一个类为.header，那么我们可以写成以下的形式：

#main{
    background: #ccc;
    .header{
        width: 20px;
        height: 20px;
    }
}

这样写起来更加的直观。一看就知道.header是在#main下的。

引用父选择器（&）：

有时候，在嵌套的子选择器中，需要使用父选择器，那么这时候可以通过&来表示。示例代码如下：

a{
    font-weight: bold;
    text-decoration: none;
    &:hover{
        color: #888;
    }
}

定义变量：

是的，你没听错。在Sass中可以定义变量。对于一些比较常用的值，我们可以通过变量存储起来，以后想要使用的时候就直接用就可以了。定义变量使用$符号。示例代码如下：

$mainWidth: 980px;
#main{
    width: $mainWidth;
}

运算：

在Sass中支持运算。比如现在有一个容器总宽度是900，要在里面平均放三个盒子，那么我们可以通过变量来设置他们的宽度。示例代码如下：

$mainWidth: 900px;
.box{
    width: $mainWidth/3;
}

@import语法：

在css中@import只能导入css文件，而且对网站的性能有很大的影响。而Sass中的@import则是完全实现了一套自己的机制。他可以直接将指定文件的代码拷贝到导入的地方。示例代码如下：

@import "init.scss";

@extend语法：

有时候我们一个选择器中，可能会需要另外一个选择器的样式，那么我们就可以通过extend来直接将指定选择器的样式加入进来。示例代码如下：

.error{
    background-color: #fdd;
    border: 1px solid #f00;
}
.serious-error{
    @extend .error;
    border-width: 3px;
}

@mixin语法：

有时候一段样式代码。我们可能要用很多地方。那么我们可以把他定义i成mixin。需要用的时候就直接引用就可以了。示例代码如下：

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

如果其他地方想要使用这个mixin的时候，可以通过@include来包含进来。示例代码如下：

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

@mixin也可以使用参数。示例代码如下：

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

那么以后在include的时候，就需要传递参数了。示例代码如下：

p { 
    @include sexy-border(blue, 1px); 
}

更详细的教程：

更详细的教程可以参考：http://sass.bootcss.com/docs/sass-reference/。