Sass

Sass 是一个CSS 的扩展,在语法CSS语法的基础上,增加变量,嵌套规则, 混合,导入,函数等功能 对CSS进行预处理的“中间语言” 文件格式 .sass ,.scss scss是对css的一种拓展,跟css很像,是开发中最常用的模式。 Sass从第三代开始,放弃了缩进风格,并且完全向下兼容普通的CSS代码。被称为scss 编译Sass Node环境 sass app.

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