熟练使用sass可以快速编写css代码；

sass中可以定义变量，方便统一修改和维护。

$pos: absolute;.btn {    position: $pos;}css结果：.btn {    position:absolute;}

嵌套:

sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。

#score {    line-height: 60px;    padding: 17px 0 0 26px;    h2 {        font-size: 28px;    }    li {        height: 60px;        position: relative;    }}css结果：#score {  line-height: 60px;  padding: 17px 0 0 26px; }  #score h2 {    font-size: 28px; }  #score li {    height: 60px;    position: relative; }

运算：

sass可进行简单的加减乘除运算等

article[role="main"] {  float: left;  width: 600px / 960px * 100%;}css结果：article[role="main"] {  float: left;  width: 62.5%;}

多值变量：

多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

$linkColor:         #08c #333;a{  color:nth($linkColor,1);  &:hover{    color:nth($linkColor,2);  }}css结果：a{  color:#08c;}a:hover{  color:#333;}而它靠nth来获取多变量中对应位置的值；如：nth($linkColor,1);

for循环：

for循环有两种形式，分别为：@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示变量，start表示起始值，end表示结束值，

这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

@for $i from 1 through 5 {    .page:nth-of-type(#{$i}) {        z-index: 11-$i;    }}css结果：.page:nth-of-type(1) {  z-index: 10; }.page:nth-of-type(2) {  z-index: 9; }.page:nth-of-type(3) {  z-index: 8; }.page:nth-of-type(4) {  z-index: 7; }.page:nth-of-type(5) {  z-index: 6; }关键在于选择器中#{$i}

 

最简单的编译软件：考拉Koala

高大上的编译方式：

web工作流的gulp方法编译：

var gulp=require("gulp");/*自动处理全部错误信息防止因为错误而导致 watch 不正常工作*/var plumber = require('gulp-plumber'); var rename=require("gulp-rename");var cssmin=require("gulp-minify-css");var sass = require('gulp-sass'),    notify = require('gulp-notify'),    autoprefixer = require('gulp-autoprefixer');// Stylesgulp.task('styles', function() {    //编译sass,编译指定目录下的sass    return gulp.src('src/scss/*.scss')    .pipe(plumber({              errorHandler: reportError          }))    .pipe(sass())     //添加前缀    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))    //保存未压缩文件到我们指定的目录下面    .pipe(gulp.dest('dest/css'))    //给文件添加.min后缀    .pipe(rename({ suffix:'.min' }))     //压缩样式文件    .pipe(cssmin())    //输出压缩文件到指定目录    .pipe(gulp.dest('dest/css'))    //提醒任务完成    .pipe(notify({ message: 'Styles task complete' }));});    /*默认*/gulp.task("default",function(){    /*把监听设置为默认的，那样就方便些*/    gulp.start("styles","watch");});/*监听*/gulp.task("watch",function(){    /*src/scss/*.scss监听的路径，styles执行的任务*/    gulp.watch('src/scss/*.scss',['styles']);});function reportError(error) {           // 阻止watch停止      this.emit('end');  }

这个方式和上面的考拉差不多，但因为讨厌频繁错误提示，所以把那部分删掉了，简化成只是提示成功和阻止错误时watch停止监听。