环境的搭建
安装步骤：↓
1、 切换到项目文件夹
2、先安装gulp
npm install gulp --save-dev
3、安装sass
npm install sass gulp-sass --save-dev
4、gulp-watch插件 （需要用到监听插件）
监听指定的文件,如果发生变化就自动进行执行相应的操作
安装: npm install gulp-watch --save-dev
sass文件的解析
注意：文件路径不能包含中文
1、在项目中创建 .scss文件
$fontColor:red;
h1 {
color: $fontColor；
}
1.1编写gulp文件 gulpfile.js
//引入gulp文件
let gulp = require('gulp');
//引入sass文件
let sass = require('gulp-sass')(require('sass'));
//定义gulp-sass文件解析任务
gulp.task('sass',function(){
return gulp.src('./sass/*.scss').pipe(sass()).pipe(gulp.dest('./css'));
})
//设置监听实时刷新 获取监听模块 自动解析
let watch = require('gulp-watch');
gulp.task('wch',function(){
watch('./sass/*.scss',gulp.series(['sass'])) //*号代表全部
})
手动指定任务运行我们的gulp脚本太麻烦了。这里我们利用gulp的watch功能，实现每当Sass文件的内容发生改变，就会自动执行对应的命令，重新进行编译。
用法： watch("要监视的文件", 要进行的响应处理)
这里我是创建了一个sass文件夹和一个css文件夹，监听文件夹下所有.scss文件的变化
1.2 创建html文件引入并且使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<h1>见过你的美，还能爱上谁</h1>
</body>
</html>
1.3执行文件
gulp wch sass
监听watch.png
Sass常用用法指南 ←
