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');});