Sass 是一个CSS 的扩展,在语法CSS语法的基础上,增加变量,嵌套规则, 混合,导入,函数等功能
对CSS进行预处理的“中间语言”
文件格式
.sass ,.scss
scss是对css的一种拓展,跟css很像,是开发中最常用的模式。
Sass从第三代开始,放弃了缩进风格,并且完全向下兼容普通的CSS代码。被称为scss
编译Sass
Node环境
sass app.sass app.css
sass --watch app.sass:app.css // 自动编译更新CSS
// 用来Sass命令来监视某个Sass文件的改动
工程化工具
Gulp插件:gulp-sass
var gulp = require('gulp'),
sass = require('gulp-sass'),
perfixer = require('gulp-autoprefixer'),
minifyCss = require('gulp-minify-css');
// 编译Sass 并添加CSS前缀 ,压缩
gulp.task('sass', function () {
gulp.src('*.sass')
.pipe(sass()) // 编译
.pipe(perfixer()) // 自动改名
.pipe(minifyCss()) // 压缩
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['sass']);
变量
语法:$key: value;
关键字:sass, css, scss, gulp