Sass

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

版权声明

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

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部