sass常用代码

sass是一种优秀的css预编译语言

px转为rem函数常用于移动端布局

@function rem($n) {  @return ($n/64)+rem;}

64为设计图尺寸的十分之一；

类的继承

.parent{

color:red;

}

.child{

@extent .parent;

}

则child的字体颜色为红色；

顺便加上基于gulp scss文件转为css文件的脚本

//编译sass 读取 编译 输出到新文件夹中
gulp.task('sass',function(){
    gulp.src('app/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'));
});

var browserSync = require('browser-sync').create();

//服务器插件中，监视文件并自动刷新

gulp.task('serve', function() { browserSync.init({ server: { baseDir: 'app' } }); 

gulp.watch(['app/scripts/*.js','app/scss/*.scss','app/*.html'],function(){ gulp.run('lint','sass','scripts'); browserSync.reload(); });});

//默认行为,直接调用服务器gulp.task('default',function(){ gulp.run('serve');});