前言：本文中所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。
一、sass插件的安装：
gulp-sass-china
// 1.安装插件
npm install gulp-sass-china
// 2.引入插件模块
let sass = require("gulp-sass-china");
// 3.定义指令
gulp.task("sass",()=>{
return gulp.src("sass/*.scss")
.pipe(sass().on("error",sass.logError))
.pipe(gulp.dest("css"))
.pipe(connect.reload());
})
// 4.监听文件更改
gulp.task("watch",()=>{
gulp.watch("sass/*.scss",["sass"])
})
// gulp-sass-china文档参考：
// https://www.npmjs.com/package/gulp-sass-china二、sass介绍
（1）sass是一种高效css编译模式，目前这种高效的css编译方式有两种：sass／less。
（2）sass基于ruby语言，特点是没有大括号，换行需要用缩进表示，非常难受。
（3）后来sass开发了两种后缀名文件：一种后缀名为sass，不使用大括号和分号。
（4）另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。
（5）所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。
（6）sass是需要编译的，sass不能直接用于页面。它可以极大地提高编程效率（对于使用熟练的人来说）。
（7）sass想要应用在项目中需要编译成css文件。这里使用gulp插件进行编译（gulp-sass-china）。
三、sass语法
（1）变量：
// 必须以$开头， 后面加上！default那就代表这个是当前变量的默认值。
$font-size:16px;
div{
font-size: $font-size;
}
（2）复杂变量的使用：
nth()方法，第一个参数为复杂变量，第二个参数为复杂变量的第几个值，从1开始数一般我们都将变量当做属性值来使用，但是也有极特殊情况下我们会将变量当做class里的类来使用。这时候，我们必须以#（$name）的方式来使用变量；
$linkColor:#b6b6b6 #ddd!default;
div{
color: nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
$name:top !default;
.class-#{$name}{
border-#{name}:1px solid #b6b6b6;
}（3）多值变量：map 和 list(复杂变量)：
// 多值变量代表的是多维数据的存储方式，换句话说，list相当于js中的数组map相当于js中的对象。
// list数据一般用空格分割， 但是也可以用 逗号 或者小括号分割多个值。
list:
$list:(20px 40px)(30px 20px)(40px 30px);//相当于多维数组，其他格式同理；
$list:20px 30px 40px 50px 60px;
$list:20px,30px,40px,50px,60px;
// 使用：对于list的使用，可以使用 nth($list,num)去调用；
// 当然我们还可以去使用其他方式；
length($list) //返回list的长度
nth($list, $n) //返回索引的项目
set-nth($list, $n, $value) //设置list中第n个的值
join($list1, $list2, [$separator]) //将两个列表链接在一起
append($list1, $val, [$separator]) //追加一个值到列表最后
zip($lists…) //将几个列表组合成多维列表
index($list, $value) //返回一个列表中值的位置
$list:(top 20px 30px) (left 40px 50px) (right 60px 70px);
@each $name,$width,$height in $list{
.box-#{$name}{
width:$width;
height:$height;
}
}
map:
// map的数据是以键值对形式出现的，期中value可以是list。格式为
$map:(key1:value1, key2:value2, key3:value3)。
// 最常用的取值方法就是用map-get($map,$key) 进行取值
// 关于map还有很多函数：
map-get($map, $key) //返回key值；
map-merge($map1, $map2) //合并两个$map；
map-remove($map, $keys…) //删除某个value并返回value值；
map-keys($map) //以list形式返回所有$map 的key;
map-values($map) //以list形式返回所有$map中的value;
map-has-key($map, $key) //查看当前的$map是否有这个key
keywords($args) //返回一个关键字
$headers:(h1:20px,h2:30px,h3:40px);
@each $key, $value in $headers{
#{$key}{
font-size: $value;
}
}
// 这里的each用法那和我们js中的for-in用法基本一致，只不过写法不同。
// $key 相当于for-in中的变量，$value 相当于for-in中的obj[i]；（4）嵌套
// sass可以进行选择器的嵌套，表示层级关
// 选择器嵌套：
ul{
li{
list-style: none;
color:nth($linkColor,1);
}
}
// 属性嵌套：
.class{
border:{
style:solid;
left:none;
right:1px;
color:#b6b6b6;
}
}（5）@at-root（不推荐使用）：
//跳出当前选择器嵌套。
.class{
color:f10;
.child{
width:100px;
}
}
.class2{
@at-root .child{
color:#b6b6b6;
}
}
@at-root (without: ...) 和 @at-root (with: ...)
// 默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support
// 如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。
// 这个语法的关键词有四个：
// all（表示所有）
// rule（表示常规css）
// media（表示media）
// support（表示support，因为@support目前还无法广泛使用，所以对其忽略）。
// 我们默认的@at-root其实就是@at-root (without:rule)。
@media screen and (max-width:641px){
.parent{
color:#b6b6b6;
@at-root .child{
width:100px;
}
}
}
// 在这里.child只会跳出.parent 和.parent类作为同级，
// 而不会跳出@media 那么我们如何让他跳出@media那？
@media screen and (max-width:641px){
.parent{
color:#b6b6b6;
@at-root (without:media) {
.child{
width:100px;
}
}
}
}
// 这种编译模式会将我们的css编译成
@media screen and (max-width: 641px) {
.parent {
color: #b6b6b6;
}
}
.parent .child {
width: 100px;
}
// 也就是说，这时候我们的 .child 带着他的父级跳出了media嵌套。
@media screen and (max-width:641px){
.parent{
color:#b6b6b6;
@at-root (without:all) {
.child{
width:100px;
}
}
}
}
// 和刚才的执行结果有稍微的一点差异,变成了这个样子；
@media screen and (max-width: 641px) {
.parent {
color: #b6b6b6;
}
}
.child {
width: 100px;
}
// 注意：这次的跳出是不带父级的。
// 小技巧：@at-root 其实有很多的组合配合，和 &配合可以改变css的从属关系；
.parent{
@at-root .child &{
color:#b6b6b6;
}
}（6）@mixin：
// mixin（混合）
// sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，
// 也可以给参数设置默认值。声明的@mixin通过@include来调用。sass中可用mixin定义一些代码片段，
// 且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。
// 无参数 mixin
@mixin marginCenter{
margin-left:auto;
margin-right:auto;
}
.cont{
@include marginCenter;
}
// 有参数 mixin
// 1）必须传参数的应用
@mixin transform($type){
-webkit-transform: $type;
-moz-transform: $type;
-ms-transform: $type;
-o-transform: $type;
transform: $type;
}
.box{
@include transform(scale(1.2))
}
// 2）设置默认情况的mixin（当你不传入参数直接使用的话那会调用默认值）
@mixin opacity($opacity:50){
opacity: $opacity/100;
filter:alpha(opacity=$opacity)
}
.box{
@include opacity()
}
// 多个参数 mixin
// 调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，
// 、则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。
// 除此之外还可以选择性的传入参数，使用参数名与值同时传入。
@mixin line($border:1px border #ccc, $padding:10px){
border-bottom:$border;
padding-top:$padding;
padding-bottom:$padding;
}
.list ul{
@include line(1px solid #ccc);
}
.list p{
@include line($padding:15px);
}
// 多组值参数mixin
// 一个参数可以有多组值，如box-shadow、transition等，
// 那么需要在参数后加三个点表示，如$shadow...
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
}
.box{
border:1px solid #ccc;
@include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),
0 4px 4px rgba(0,0,0,.3));
}
// 扩展/继承
// sass可通过@extend来实现代码组合声明，使代码更加优越简洁。
.active{
border:1px solid #b6b6b6;
padding:10px;
color: #333;
}
.success{
@extend .active;
width:100px;
}（7）运算：
// sass可进行简单的加减乘除运算等，当我们拿到一张需要转换成百分比或rem布局的设计稿，这时候我们有福了
.container{
width: 100%;
}
//百分比
.aside{
width:(600px/960px)*100%;
}
//rem
.article{
width:(300px/960px)*1rem;
}（8）函数：
// sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。
// 实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，
// 其调用方法为lighten($color,$amount)和darken($color,$amount)，
// 它们的第一个参数都是颜色值，第二个参数都是百分比。
$baseFontSize:10px;
$gray:#ccc;
@function pxToRem($px){
@return ($px/$baseFontSize)*1rem;
}
body{
font-size:$baseFontSize;
color:lighten($gray,10%);
}
.test{
font-size:pxToRem(16px);
color:darken($gray,10%);
}
// 这个和我们JS中的函数那非常的相似，可以和我们js中的函数一样使用。
// 同时注意，这里的返回值几乎是必须的所以请在每个函数结束时，使用@return去返回需要的返回值。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
