Sass&Gulp
一、sass介绍
(一) SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单且可维护。
(二) SASS的本质是一种帮助你简化CSS工作流程的方式，帮助你更容易的维护和开发CSS内容。
二、环境搭建及编译指令
(一) 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，大家可以到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本。
(二) Ruby 安装文件下载好后，可以按应用软件安装步骤进行安装 Ruby。在安装过程中，个人建议将其安装在 C 盘下，在安装过程中选择第二个选项（不选中，就会出现编译时找不到Ruby环境的情况）。
(三) Ruby 安装完成后，在开始菜单中找到新安装的 Ruby，并启动 Ruby 的 Command 控制面板。
(四) 当你的电脑中安装好 Ruby 之后，接下来就可以安装 Sass 了。同样的在windows下安装 Sass 有多种方法。但这几种方法都是非常的简单，只需要在你的命令终端输入一行命令即可。
(五) 通过命令安装 Sass
打开电脑的命令终端，输入下面的命令：
gem install sass
提醒一下，在使用 Mac 的同学，可能需要在上面的命令前加上"sudo"，才能正常安装：
sudo gem install sass
(六) 如果不能正常安装sass?
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/[如果你系统不支持https,请将淘宝源更换成：gem sources -a http://gems.ruby-china.org ]
gem sources -l
gem install sass
(七) 检测Sass
- sass -v
(八) 升级sass版本的命令行为
- gem update sass
(九) 卸载（删除）sass
在常期使用的时候难免会碰到无法解决的问题，有时候可能需要卸载 Sass，然后再重新安装 Sass。那么怎么卸载 Sass 呢？
其实他也就是一句命令的事情：
- gem uninstall sass
三、基本用法
(一) sass提供四个编译风格的选项：
nested : 嵌套缩进的css代码，它是默认值
expanded:没有缩进的、扩展的css代码
compact:简洁格式的css代码
compressed:压缩后的css代码
(二) sass导入
- Css本身包含一个指令@import,但是CSS中的@import每次执行都会发送一次新的请求都会消耗一定的资源 SASS中扩展了这个指令，会将包含的编译成一个CSS文件，切割成小的部分（partials）包含进来进行处理。 Partials这样的文件，命名规范是以下划线开头的，这样的SCSS文件不会被编译成CSS文件。 Partials是用来定义公共样式或者组件的样式的，专门用于被其他的SCSS文件import进行使用的。 在SCSS文件中引入指令@import在引入Partials文件时，不需要添加下划线。
四、sass嵌套
(一) Sass 中还提供了选择器嵌套功能，但这也并不意味着你在 Sass 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深，这往往是大家不愿意看到的一点。这个特性现在正被众多开发者滥用。
(二) 选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，Sass 的嵌套分为三种：
选择器嵌套
属性嵌套
伪类嵌套(了解)
(三) 选择器嵌套
假设我们有一段这样的结构：
想选中header中的a标签，在写CSS，会这样写： nav a{
color: red;
}
header nav a{
color : green;
}
l 那么在SASS中，就可以使用选择器的嵌套来实现： //在嵌套的过程中，如果需要用到父元素，在SASS中通过&符号引用父属性 nav {
a{
color: red;
header & { ///header nav a
color:green;
}
}
}
(四) 属性嵌套——不常用
五、 sass变量定义
(一) SASS中的变量，必须是$符号开头，后面紧跟变量名，变量名称和变量值之间要使用冒号：进行分隔（参考CSS属性和值的设定语法），如果值后面加上[!default]就表示默认值。 引用变量的值，直接使用变量名称，即可引用定义的变量的值。
(二) 普通变量：定义之后可以在全局范围内使用
(三) 默认变量：sass的默认变量需要在值的后面加上!default进行标识
默认变量的覆盖：在默认变量前后，重新声明变量并赋值即可
默认变量是基于组件化开发的过程中，进行优化处理的
(四) 特殊变量：一般情况下，我们定义的变量都是属性值，可以直接使用，但是如果变量作为属性或者其他的特殊情况下，必须使用#{$variable}的形式进行调用。
-
{$varialbe}就是取值的一种特殊形式，符合特殊用法。
六、 sass判断语句
(一) @if指令是SASS中的一个控制指令，用于在表达式满足条件(true)的时候输出指定的样式，在不满足条件（false）或者表达式为null的情况下输出其他的样式
@if条件{
//当条件为真时执行的样式 } 同样，也可以通过@else if 和@else 指令结合，进行多条件的判断
七、 sass数组/map（了解）
(一) list表示列表类型的值 在CSS中就是表示属性的一串值 列表中的值可以使用空格或者逗号分隔，如
border:#ccc solid 1px;值就是列表
font – family:Courier , “Lucide Console”,monospace;值也是列表
(二) 列表中可以包含其他的列表，如：
- padding(10px 5px) (5px 5px);可以用括号分开，编译成css时会去掉这些括号
(三) map就是列表项目中带名称的列表
- $map : (key1 : value1,key2:value2,key3:value3)
$var (key1:value1,key2:value2..):声明一个Map
length($map):获取map中的元素对个数
map-get(map中名称为key的值
map-keys(map中所有的key
map-values(map中所有的value
map-has-key(map中是否包含指定的key
map-merge(map2):将map2合并在一起
map-remove(map中移除
八、 sass循环语句
(一) @for指令在SASS中用于重复处理一组指令
(二) 有两种表现形式
@for $var from <开始值> through < 结束值>
@for $var from
to to和throuch都是表示一个区间，唯一的区别就是停止循环的地方不一样。i，
和 是SASS表达式并且必须是整数
(三) @each在SASS中主要被用来进行列表或者映射数据的循环
主要表示形式：@each $var in
RSY)
4JZETDE}8FIVG759">
九、 sass-mixin函数(宏)
(一) sass中可以通过@mixin声明混合，可以传递参数，参数名称以$开始，多个参数之间使用逗号分隔，@mixin的混合代码块由@include来调用
(二)
(三) 有参数混合
十、 sass-function介绍
(一) 函数的功能主要是数据的运算，SASS中可以将一些值交给函数进行处理，具体的处理方式由定义的函数具体的设计确定。
(二) @function 函数名称（参数列表）{
//数据处理 }
十一、 sass继承
SASS允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 { border: 1px solid #ddd; }
class2要继承class1，就要使用@extend命令：
.class2 { @extend .class1; font-size:120%; }
第二节：应用
一、使用sass改造飞机大战的CSS文件
第三节
一、gulp介绍
(一) gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
二、工程化的作用
(一) 自动压缩JS文件
(二) 自动压缩CSS文件
(三) 自动合并文件
(四) 自动编译sass
(五) 自动压缩图片
(六) 自动刷新浏览器
三、Node环境安装
(一) window下，下载node安装即可。 node下载地址：http://nodejs.cn/download/ 安装比较简单，基本一直下一步即可，安装路径随意。
(二) 安装完成后，终端输入如下命令 显示版本号即安装成功。
(三) node -v
四、gulp安装
(一) 推荐安装cnpm：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。网址：http://npm.taobao.org
(二) 安装：命令提示符执行 npm install cnpm -g --registry=https://registry.npm.taobao.org
(三) 全局安装gulp
在com中执行cnpm install gulp –g
查看是否正确安装：命令提示符执行gulp –v，出现版本号即为正确安装
五、gulp插件安装（编译/压缩/合并/代码检查/即时刷新）
(一) 项目文件根目录新建package.json 注：package.json是基于nodejs项目必不可少的配置文件，它是存在项目根目录的普通json文件重点内容
进入你的项目文件
执行命令cnpm init来新建package.json
检测package.json是否成功新建查看项目文件根目录，是否新建package.json，且内容是否和你终端中输入的一致。 package.json内容如下：{ "name": "test", "version": "1.0.0", "description": "我是描述", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC"}注：可不使用cnpm init方式，可选择手动创建package.json配置文件
在项目中新建配置文件package.json 配置文件是为了将来项目迁移使用，测试demo时，可以不需要 {
“name”:”test”, //项目名称（必须） “version”: “1.0.0”, //项目版本（必须） “description”:”This is for study gulp project!”, //项目描述（必须） “author”:{ //项目作者信息 “name”:”zzl”,
“email”:[email protected] },
“devDependencies”:{ //项目依赖的插件，这个不用写，待会装完插件自动生成 “gulp”:”^3.8.11”,
“gulp-less”:”^3.0.0”
}
} 注：由于json文件里是不能写注释的，所以实际开发的时候，记得把注释去掉Package.json的作用 当有一个新的项目需要建立，或者有人跟你合作开发时，我们不需要把项目中所有用到的模块（文件大小可能上百兆）都上传到git,只需要给项目带上一个配置文件 而对方拿到项目后，只需要一个命令npm install
Node就可以自动读取项目的配置文件，并将所有依赖模块自动下载，这样不是更快捷，更方便吗？
(二) 本地安装gulp插件 注：全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能
(三) 进入你的项目文件路径中后，执行cnpm install gulp --save-dev
(四) 安装gulp-sass插件（拿该插件进行示例）进入你的项目文件路径中后，执行cnpm install gulp-sass --save-dev
(五) 常用插件
sass的编译（gulp-sass）
less编译 （gulp-less）
重命名（gulp-rename）
自动添加css前缀（gulp-autoprefixer）
压缩css（gulp-cssnano）
js代码(语法)校验（gulp-jshint）
合并js文件（gulp-concat）
压缩js代码（gulp-uglify）
压缩图片（gulp-imagemin）
自动刷新页面（browser-sync）：保存自动刷新
图片缓存，只有图片替换了才压缩（gulp-cached）
更改提醒（gulp-notify）相当于 console.log()
(六) 安装以上插件
- $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev
六、 gulp****使用
(一) 创建一个****gulpfile.js****在根目录下，****gulp****只有四个****API****：****tast,watch,src****和****dest
1. Task****：这个****API****用来创建任务，在命令下可以输入****gulp test****来执行****test****任务。
2. Watch:****这个****API****用来监听任务。
3. Src:****这个****API****设置需要处理的文件的路径，可以是多个文件以数组的形式****[main.scss****，****vender.scss],****也可以是正则表达式****//.scss****。*
4. Dest:****这个****API****设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本
(二) 载入插件
1. 接下来，我们需要建立一个****gulpfile.js****档案，并且载入这些插件： var gulp = require('gulp'),
sass = require('gulp- sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');
七、 Gulp API
(一) 工作方式 gulp的使用流程一般是：首先通过gulp.src()方法获取到想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中。例如： var gulp = require('gulp');
gulp.src('script/jquery.js') // 获取流的api
.pipe(gulp.dest('dist/foo.js')); // 写放文件的api
(二) globs的匹配规则 我们重点说说gulp用到的globs的匹配规则以及一些文件匹配技巧，我们将会在后面用到这些规则。 gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件：
|
匹配符
|
说明
|
|
|
匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾
|
|
**
|
匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。
|
|
?
|
匹配文件路径中的一个字符(不会匹配路径分隔符)
|
|
[...]
|
匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法
|
|
!(pattern|pattern|pattern)
|
匹配任何与括号中给定的任一模式都不匹配的
|
|
?(pattern|pattern|pattern)
|
匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)?
|
|
+(pattern|pattern|pattern)
|
匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+
|
|
*(pattern|pattern|pattern)
|
匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)*
|
|
@(pattern|pattern|pattern)
|
匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern)
|
下面以例子来加深理解
- 能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js
. 能匹配 a.js,style.css,a.b,x.y
//*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js
** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件
*/.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js
a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z
a/b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单单独出现才能匹配多级目录
?.js 能匹配 a.js,b.js,c.js
a?? 能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符
[xyz].js 只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符
[^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js
(三) src：获取流(源文件路径)
gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。其语法为：gulp.src(globs[, options]);
globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组;类型为String或 Array。当有多种匹配模式时可以使用数组 //使用数组的方式来匹配多种文件 gulp.src(['js/.js','css/.css','*.html'])
(四) dest：写文件（目标文件路径） gulp.dest()方法是用来写文件的，其语法为： gulp.dest(path[,options])
path为写入文件的路径；
(五) watch：监听文件 gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。其语法为gulp.watch(glob[, opts], tasks); 如： gulp.task(“one”,function(){
});
gulp.task(“two”,function(){
});
gulp.watch('js/*/.js', [“one”,”two”]);
(六) task：定义任务 gulp.task方法用来定义任务，其语法为： gulp.task(name[, deps], fn)
name 为任务名； deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数； fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。 当你定义一个简单的任务时，需要传入任务名字和执行函数两个属性。 如： gulp.task('greet', function () {
console.log('Hello world!');
});
八、结合sass的使用
(一) 建立任务
编译sass,Autoprefix及缩小化
首先，我们设置编译Sass。我们将编译Sass、接着通过Autoprefixer，最后储存结果到我们的目的地。接着产生一个缩小化的.min版本、自动重新整理页面及通知任务已经完成： gulp.task('styles', function() {
//编译sass
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded' }))
//添加前缀 .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
//保存未压缩文件到我们指定的目录下面 .pipe(gulp.dest('dist/assets/css'))
//给文件添加.min后缀 .pipe(rename({suffix: '.min'}))
//压缩样式文件 .pipe(minifycss())
//输出压缩文件到指定目录 .pipe(gulp.dest('dist/assets/css'))
//提醒任务完成 .pipe(notify({ message: 'Styles task complete' }));
});说明：gulp.task('styles', function() { ... )}; 这个gulp.taskAPI用来建立任务。可以透过终端机输入$ gulp styles指令来执行上述任务。
return gulp.src('src/styles/main.scss') 用来定义一个或多个来源档案。
.pipe(sass({ style: 'expanded' })) 使用pipe()来找到哪个插件
.pipe(gulp.dest('dist/assets/css')); 这个是用来设定目的路径。
(二) JS代码校验、合并和压缩
- //发布任务 gulp.task(“scripts”,function(){
//js代码校验 return gulp.src(“javascripts/*.js”)
.pipe(jshint())
.pipe(jshint.reporter(“default”))
//js代码合并 .pipe(concat(“all.js”))
//给文件添加.min后缀 .pipe(rename({suffix:”.min”}))
//压缩脚本文件 .pipe(uglify())
//输出压缩文件到指定目录 .pipe(gulp.dest(“assets”))
//提醒任务完成 .pipe(notify({message : “Scripts task complete”}));
});
(三) 图片压缩
Gulp.task(“images”,function(){
return gulp.src(“images/*”)
.pipe(cached(imagemin({optimizationLeve1: 3,progressive:true, interlaced:true}))) // 取值范围：0-7（优化等级）,是否无损压缩jpg图片，是否隔行扫描gif进行渲染 .pipe(gulp.dest(“images”))
.pipe(notify({message : “Images task complete”}));
});
(四) 事件监听
- Gulp.task(“watch”,function(){
gulp.watch(“stylesheets/.scss”,[‘styles’]);
gulp.watch(“javascripts/.js”,[“scripts”]);
gulp.watch(“images/”,[‘images’]);
livereload.listen();
gulp.watch([“assets/”]).on(“change”,livereload.changed);
});
(五) 运行
Gulp default
Gulp watch
运行整个任务gulp
(六) 总结
安装node
安装gulp（全局gulp,本地gulp及所需插件）
新建gulpfile.js文件
引入模块
创建任务
运行 gulp 任务名
我们自己设置的项目文件路径
- 如：assets :压缩后样式和脚本存放的目录 images :图片存放目录 javascripts :脚本存放目录 stylesheets : 样式存放目录 plugin :插件存放目录 gulpfile.js
- 编译sass并重命名后压缩css
var gulp = require("gulp");
var sass = require("gulp-sass");
var rename = require("gulp-rename");
var cssnano = require("gulp-cssnano");
gulp.task("sass",function(){
return gulp.src("src/sass/*.scss").pipe(sass()).pipe(gulp.dest("css")).pipe(rename({suffix : ".min"})).pipe(cssnano()).pipe(gulp.dest("css"));
})
7.压缩JS
gulp.task("script",function(){
return gulp.src("src/js/*.js").pipe(rename({suffix : ".min"})).pipe(uglify()).pipe(gulp.dest("js"));
})
第四节：应用
一、掌握项目打包
第五节：综合应用
一、掌握gulp工具的使用
二、掌握sass的编写