CSS预处理器之SASS

SASS

SASS是一个成熟、稳定、强大的 CSS 扩展语言解析器，提供变量、嵌套、混合、继承等特性，大大节省了设计者的时间，使得CSS的开发变得简单和可维护。

语法

1.注释 ：单行注释（//）和多行注释（/   /） 与js一样 

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

2.变量 ：与jquery一样必须以$符号开头 后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开

2.1，全局变量与局部变量

定义在任何选择器之外的变量被认为是全局变量，定义在选择器内的变量称之为局部变量。但启用了global后，即使写在局部也能覆盖全局变量（sass 3.4版本后可用）

$color:#fff !global;

2.2，默认变量

sass的默认变量仅需要在值后面加上!default即可。   $fontSize:12 !default;

2.3，特殊变量，一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用

$borderDirection:top !default;
    //应用于class和属性
       .border-#{$borderDirection}{
            border-#{$borderDirection}:1px solid #ccc;
       }

3.嵌套

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID

例如：

 #content article h1 { color: #333 }
  #content article p { margin-bottom: 1.4em }
         #content aside { background-color: #EEE }

sass写法：

#content {
      article {
        h1 { color: #333 }
      p { margin-bottom: 1.4em }
      }
            aside { background-color: #EEE }
       }

在嵌套中用&可以表示父元素选择器

4.混合器

变量可以实现简单样式的重用（如color,width等），但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，可以通过sass的混合器实现重用

sass中使用@mixin声明混合，通过@include来调用
- 无参数mixin
- 有参数mixin：参数名以$符号开始
- 多个参数mixin：多个参数以逗号分开
- @content

```
    @mixin max-screen($res){
      @media only screen and ( max-width: $res )
      {
        @content;
      }
    }
    @include max-screen(480px) {
      body { color: red }
    }
```

PS：@mixin通过@include调用后解析出来的样式是以拷贝形式存在的，而下面的继承则是以联合声明的方式存在的，所以从3.2.0版本以后，建议传递参数的用@mixin，而非传递参数类的使用下面的继承%。

5.继承

使用选择器的继承，要使用关键词@extend

5.1继承一般样式
     @extend h1

5.2占位选择器%

     //占位符编译后不存在css样式中
    %ir{
      color: transparent;
      text-shadow: none;
      background-color: transparent;
      border: 0;
    }
    @extend %ir;

6.函数

Sass中的数字函数提要针对数字方面提供一系列的函数功能

    6.1，常用函数

percentage($value)：将一个不带单位的数转换成百分比值；
round($value)：将数值四舍五入，转换成一个最接近的整数；
ceil($value)：将大于自己的小数转换成下一位整数；
floor($value)：将一个数去除他的小数部分；
abs($value)：返回一个数的绝对值；
min($numbers…)：找出几个数值之间的最小值；
max($numbers…)：找出几个数值之间的最大值。
lighten($color,$percent)
darken($color,$percent)，$color颜色值，$percent百分比

     6.2，自定义函数

格式：@fuction 函数名

      $oneWidth: 10px;  
     $twoWidth: 40px;  

      @function widthFn($n) {  
           @return $n * $twoWidth + ($n - 1) * $oneWidth;  
          }  

     .leng {   
             width: widthFn($n : 5);  
     } 

7.运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

8.条件判断及循环

@if判断
@if可一个条件单独使用，也可以和@else结合多条件使用
@if $type == ocean {
    color: blue;
} @else if $type == matador {
    color: red;
} @else {
    color: black;
}
for循环
    @for $var from <start> through <end>（包含end值）
    @for $var from <start> to <end>（不包含en值）

当sass文件编写出来之后需要转译成css文件，通常用gulp。

gulp

gulp是当下最流行的自动化工具 ，可以自动化完成我们开发过程中大量的重复工作。
为什么要用自动化构建工具？ 主要是用来自动完成一系列重复的操作，如：
编译：less->css,sass->css,coffeescript->js,es6->es5
合并: css, js
压缩 ：css, js, html
优化：图片优化
官网：http://gulpjs.com/
中文网：http://www.gulpjs.com.cn/

gulp的安装和使用(node.js环境下)

1.全局安装gulp  :  npm install - g    全局作用：通过它在任何目录下来执行gulp任务

2.本地安装gulp：作为项目的开发依赖（devDependencies）安装： npm install --save-dev gulp
本地安装gulp是为了调用gulp插件的功能，
–save-dev 保存配置信息至 package.json 的 devDependencies 节点
这步操作前先新建package.json文件（npm init）
这步完成后就可以安装各种gulp插件了

3.创建gulpfile.js文件
在项目根目录下创建一个名为 gulpfile.js 的文件（重要）
说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件，内容如下：
var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

4.运行 gulp：
在命令行执行以下命名
    gulp <任务名称>
如果不写任务名称，则自动运行default任务（如果有）

gulp的工作流程

1.通过 gulp.src() 方法获取到想要处理的文件，并返回文件流
2.然后文件流通过 pipe 方法导入到 gulp 的插件中
3.经过插件处理后的文件流再通过pipe方法导入到 gulp.dest() 方法中
4.最后通过gulp.dest() 方法把流中的内容写入到文件中

PS：文件流=>文件在内存中的状态

gulp API

1.创建任务
    gulp.task('buildsass',function(){

    });

2.匹配要处理的文件
gulp.src(globs[, options])
globs匹配语法：https://github.com/isaacs/node-glob（底部PS） 
options 有3个属性buffer、read、base

3.输出文件
gulp.dest(path[, options])
把文件流中的内容中输出到指定目录

4.监听文件修改，并执行相应任务
gulp.watch(glob [, opts], tasks)
gulp.watch(glob [, opts, cb])

gulp 插件

大部分插件都可以在http://www.npmjs.com找到，任何插件的使用都要经历以下三步：

1. 安装插件：npm
npm install --save gulp-htmlmin

2.引包：require()
var htmlmin = require('gulp-htmlmin')

3.使用：pipe()
gulp.task('htmlmin',function(){
   gulp.src('src/html/*.html')
     .pipe(htmlmin())
     .pipe(gulp.dest('dist/html'));
});

常用gulp插件

htmml压缩：gulp-htmlmin
css压缩：gulp-clean-css
js压缩：gulp-uglify
合并文件：gulp-concat
文件重命名：gulp-rename
编译Sass: gulp-sass
编译 Less：gulp-less

浏览器同步测试：browser-sync
创建node服务器：http-server

扩展：globs语法