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

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！