Sass=scss编程

Sass 是css预处理器

css预处理器用编程思维写一些可以转成css的东西

优点：更加简洁  适应性更强  可读性更佳   更易于代码的维护

1 .Sass与scss 区别

        1 .文件扩展名不同（后缀名）

        2 .语法不同

Sass语法:       div          color:red

Scss语法：    div{      color:red;     }

2 .Cmd命令

1 .ping_  ：检测你的网络通不通

2 .ipconfig_：查看本机IP

3 .cls_：清屏

4 .D:_ :切换盘符

5 . Tab:自动补全文件名称

6 .   /       进入根源目录

7 .  ./       同级

8 .  ../     上一级

9 .  cd_       进入文件夹

10 . dir_   当前文件下的所有文件

11 . path    环境变量

12 . 安装的文件名_-v    查看版本号

13 .gem install   sass     安装sass

3 .将scss装换为css文件

命令行（1.2.3）

1 .sass_a.scss      出现的scss文件

2.sass_a.scss_a.css      scss装换为css文件

3 .sass_--watch_a.scss:a.css      监听sass文件到css文件

4 .通过编辑器

     输出方式   （--style nested）

1 . nested   嵌套输出方式（开发）  格式：  red；}

2 .  compact    紧凑输出方式    （代码在一行）

3 .  expanded     展开输出方式    （我们常用）

4 .  compressed      压缩输出方式     （项目上线时候用）

5 .软件编译

6 .sass声明变量      （格式    $a:20;）

1 .调用变量

 1 .直接调用（属性值调用）

    格式：   $width:10;     div{width:  $width;}

2 .插值使用（选择器   属性名调用）

           格式:  $width:width;   .div{#{$width}:100px；}

$box:".box";    #{$box}{width:100px;}

7 .变量

1 .普通变量（全局变量）格式  $color:red;  div{color:$color;}

2 .局部变量   格式  nav{$color:blue;  background: $color;}

3 .默认变量  ！Default（用于sass引入scss文件）格式 $color:red !Default;

8 .嵌套方法（3种） & = 父级

1 .选择器嵌套   格式nav{ a{color: $color;header &{color:$color;}}} 

2 .属性嵌套   格式 font{ border:{top: 1px solid red;}}

3 .伪类嵌套  格式.clearfix{&:before,&after{color:red;}&after{background: red;}} 

9 .混合宏  @mixin  a{} div{@include a}

1 .不带参数     格式 @mixin a{color:red}

2 .带默认参数     格式 @mixin a（$wdith:5px）{width:$wdith}

3 .带参数      格式 @mixin border($x,$y){border:$x;width: $y;}

调用参数 .nav{@include

border(50px,100px)}

4 .复杂的混合宏

格式@mixin

box-shadow($shadow...) {box-shadow: 10px 5px red;}

调用参数 div{ @include

box-shadow}

10 .sass继承  （继承的是代码块）

1 .@extend 继承的是标签名，在css文件中div和p 同存在

格式 div{color:

red;}p{font-size: 12px; @extend div;

2 .sass占位符（%）（%后的代码不在css文件中出现）

格式  %nav{width: 10px;}  div{@extend %nav;}

%nav 的代码：不被@extend调用  在css中div不出现

           ：调用@extend      在css中%nav不出现

3 .优点：更加干净简洁

11 .混合宏 继承   占位符的区别

混合宏：不会合并代码可传参    格式@mixin a{color: red;}div{@include a}

继承：可以合并代码，不能传参 

占位符：不调用不产生css代码 css中%后的代码不显示

12 .注释

1 .//css不编译

2 ./* */  css会编译

3 .@charset “utf-8”文件编码（文字）

13 .sass数据类型（6种）

1 .数字类型 number ：有数字就为number

2 .字符串 string ：有引号：“文字”，无引号：英文

3 .颜色 color：red   #.....  rgba（）

4 .布尔类型：true  false

5 .空：null

6 .值列表  ：空格逗号分开

格式：（1）margin：10px 20px 30px 40px;  （2）font-family：“..”,“..”;

14 . sass运算  注意空格

1 .加（ + ）：单位统一         格式 width:20px + 8或8px;

2 .减（ - ）：单位统一          格式 width:20px - 8或8px;

3 .乘（ * ）：一个有单位一个无单位      格式 width:20px * 8;

4 .除（ / ）:一个有单位一个无单位

    方式一:（）括起来：width:（100px / 2）

    方式二:变量的情况：$x:10px;$y:5;  width:$x / $y

    方式三:有其他运算符：width：100px / 2 + 3;

5 .颜色运算：只允许16进制的颜色运算

格式：color:#1b2032 +

#307149；有一位大于16 就-16

6 .字符串运算：

方式一：左边带“”，右边无引号，css 中带“”；

方式二：左边不带“”，右边有引号，css中无引号；

[if !supportLists]15.   [endif]sass控制命令

1 .@if 条件判断{对}@else {否}@else if 条件判断{ }

格式：$w:10px;     div{ width:$w;@if $w>20px{color:red;}

@else {color:blue;}或 @else if 条件判断{ }}

2 .@for循环语句

方式一：@for $i from 1to 2 {.div#{$i}{width:1px}}  From to  :包开始不包结束

方式二：@for $i from 1through 2 {}        From through  包开始包结束

3 .@while 语句不满足不执行满足才执行

格式  @while条件{条件为true执行}

$i:5;@while $i>0 {div{width:$i *

2px}$i:$i - 1}

4 .@each 便利值列表

    格式 @each $i in top，bottom{div{border-#{$i}:1px; }

16.sass与less的区别

LESS是基于JavaScript运行,所以LESS是在客户端处理.

Sass是基于Ruby的，是在服务器端处理的。

less没有输出设置，sass有4种输出设置

sass有if for循环，less没有

less定义变量用@

scss定义变量用$

Zepto  现代高浏览器的js 库 移动端事件  （on/off）

格式   $（“div”）.Tap(function(){

})

1 .Touch

1.Tap    轻触屏幕

2.singleTap  单击

3.doubleTap  双击

4.longTap  长按 >750ms 触发

2 .滑过事件

     1.swipe  任意滑

     2.swipeLeft   左滑

     3.swipeRight  右滑

     4.swipeUp     上滑

  5.swipeDown   下滑

3 .解决bug  

document.addEventListener("touchstart",function(event){event.preventDefault();})

4 .原生js / jq 移动端的事件

要用事件绑定  格式

     div.addEventlistener(“touchstart”,function(){})

1 .ontouchstart    开始触碰      /  touchstart

2 .ontouchmove    屏幕上移动     /  touchmove

3 .ontouchend     触碰结束       /  touchend

5 .Zepto 与 jq 区别

1 .zepto针对移动端，不支持ie10以下

2 . jq Dom操作时，不能设置id，     zepto可以

3 .jq的width()和height() 会忽略padding和border， zepto是根据盒模型计算

   格式：var width=$(“img”). width()

4 .zepto的  each()只能遍历数组，不能遍历对象

 Swiper

1 .链接结构

2 .html结构

class="swiper-container">

class="swiper-wrapper">

class="swiper-pagination">分页器

     右箭头

     滚动条

3 .js结构

     var mySwiper = new Swiper('.swiper-container',{}) 

4 .配置选项

   1.* loop: true,自动循环播放（true播放  false不播放）

   2.*autoplay:3000,  自动播放切换时间默认0

   3.* autoplayDisableOnInteraction: true,不执行

用户操作完swiper,是否禁止自动播放，false 执行

   4.autoplayStopOnLast:true,停止自动切换

         播放到最后一张图停止  false不停止自动切换

   5. grabCursor:true,改变鼠标的形状（小手）

   6.* direction:vertical垂直轮播默认horizontal 水平

   7. initialSlide:0,设定初始的Slide

   8.* speed:300, 滑动时间

   9.* prevButton:'.swiper-button-prev',左键

  10.* nextButton:'.swiper-button-next',右键

  11.* effect:‘flip’ 3d 翻转‘coverflow’3d流‘cube’方块‘fade’淡入

  12. SlidesPerview:2,设置同时显示slide的数量

  13.* pagination : '.swiper-pagination',开启分页器 

  14.* paginationClickable :true,手点小原点图动

  15.paginationElement:‘a’设置原点的标签

  16. paginationType:”fraction”,分页（1/3)‘bullets’原点

‘progress’进度条‘custom’自定义

     17 .* scrollbar:‘swiper-scrollbar’开启滚动条

  18. scrollbarDraggable:true,   滚动条控制slide

5 .回调函数

1 .onTouchstart:function(){} 开始触碰是执行函数

      Touchmove触碰屏幕移动 Touchend 触碰结束

   2.* onSlideChangeStart:function(){}开始切换时执行函数

6 .Swipre方法（对象名.方法）

   1.* mySwiper.activeIndex 返回当前slide的下标

2 .mySwiper.clickedIndex 返回最后点击的slide的下标

   3.* muSwiper.slideTo()跳转到某一个指定的slide上

   4.*onlyExternal  禁止拖动  双轮播时需要

IScroll

1 .html结构   

2 .js 结构        var myiscroll=newIScroll("#wrapper",{})

3 .配置参数

  1. bounce:false,false无弹力效果默认true有弹力效果

2.mouseWheel:true,开启鼠标滚轮 false=默认关闭鼠标滚轮

3.scrollbars:true,开启滚动条 false=默认关闭滚动条

4.interactiveScrollbars:true,拖动滚动条 false 无拖动

5.fadeScrollbars:true,滚动条淡入淡出 false无效果

6.scrollY:true,竖着滚动   

7.scrollX:true,横着滚动

4 .问题坚决方案

当内容比父元素wrapper小的时候，就不能滚动了，可以动态给内容设置

min-height,让内容的最小高度比父元素大1像素，参考:

if($("#wrapper>div").height()<$("#wrapper").height()){\      $("#wrapper>div").css({'min-height':$('#wrapper').height()+1+'px'})} 

5 .方法（对象.方法）  

   1.Scroll.y    当前位置

   2.startY  开始滚动的位置

   3.maxScrollY   最大滑动距离

4 .refresh（）   重新加载页面

   5.scrollTo（0，.maxscrollY）跳转到某一个位置

node

1 .node.js      是运行在服务器的JavaScript.

2 .好处：   nodejs基于googlede v8引擎.执行效率高.速度快性能好

3 .特点:

1 .Node.js 异步IO模型  2 .回调函数  3 .单线程    4.跨平台

4 .运行方式

1 .cmd命令：  node_ 到node中    ctrl+c返回   node.js_进入js文件

2 .在终端上直接写代码

3 .通过node打开外部文件

5 .commonJs规范：

1 .每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

2 .每个模块内部，module代表当前模块，是一个对象，它exports属性，是对外的接口。

7.模块：

1 .概念：每一个文件就是一个模块

2 .原生模块（fs,http,path,url,queryString...）

3 .文件模块    (自己写的都叫做文件块，.js    .json  .node )

4 .主模块:      会包含其他模块，最终运行他。

8 .模块加载：

1 .require(模块路径)  

要注意：模块路径直接写模块名，代表的是原生模块，

如果想引入文件模块， 那么需要使用相对路径或者绝对路径的方式

2 .exports(导出对象)

3 .module(当前模块)

格式

var a=5;

1. exports.num=a;   //(把a当作num的属性值  暴露出去)

2. module.exports.num=a;  //(把a当作num的属性值  暴露出去)

3. module.exports=a;   //(输出的是具体的值)

4. exports=a;     //(输出的是空对象)

exports    只能导出对象   module.exports   可以导出对象，以及具体的值

9 .原理：

exports -> {} <- module.exports（输出时，优先加载）

10 .模块初始化：  一个模块被加载，并执行后，会初始化一次，随后模块里的内容都会被缓存起来，下次直接用就可以了   

11 .常用的原生模块：

     fs、http、url、path、queryString

12 .模块加载：

1 .加载原生模块 :(直接写模块名)     var fs=require("fs");

2 .加载文件模块：   相对路径（同级目录要加./）、绝对路径

13 .引入一个包名：

     包的概念：一个文件夹就是一个包

     1、包必须要有： index.js  .json  .node (入口文件)

     2、package.json（包管理文件）{“main”:“./文件”}

     如果直接加载包名，会去寻找index这个文件，如果没有index，建立一个package.json文件，并且设置一个main属性（入口文件）    

14 .node_modules目录

     查找模块的机制：从当前目录开始查找node_modules，如果没有，返回父级继续查找，一直找到根目录，如果还没有，报错

15 .NPM   包的管理工具

npm  包管理工具   https://www.npmjs.com/

16 .安装包：

1 .全局安装  npm install包名 -g

           (不管在哪运行，默认都会安装到c盘的AppData文件夹下)

2 .本地安装  npm install包名    (安装到当前目录下)

3 .卸载包：npm uninstall 包名

4 .查看包：   npm list 

5 .查看某个包的版本号：   npm list包名

6 .更新： npm updata包名

7 .安装中国的npm 方式

npm install -g cnpm

npm install -g cnpm

-registry=https://registry.npm.taobao.org

17 .node.js 文件系统

1 .读取文件内容

格式：varfs=require("fs");  fs.readFile("./a.txt",function(err,data){

           if(err){console.log(err);}     console.log(data.toString());   });

2 .打开某个文件

var fs=require("fs"); fs.open("../3.fs","r+",function(err){//打开某个文件夹，

       if(err){//判断报错console.log(err);}    //读取文件

      fs.readFile("./a.txt",function(err,data){     if(err){console.log(err);}

console.log(data.toString()); //输出文件内容转化成字符串    })；})；

3 .写入文件  注：写入的内容会替换掉以前的内容

var fs=require("fs");var

str="吃了吗";

fs.writeFile("./a.txt",str,function(err){

        if(err){console.log(err);   }     console.log("写入成功");     });

可以写成String /Buffer（流）

4 .删除文件

 varfs=require("fs");   fs.unlink("./a.txtj",function(err){

        if(err){console.log(err);}    console.log('删除完成');    })

18 .http

1 .http模块:搭建 HTTP 服务端   var http =require（“http”）

2 .参数

1 . request  :客户端请求 2 .response :服务端返回3 .端口号：1024-65535

3 .访问服务器：

1、本地服务器ip:  http://127.0.0.1:8080

2、         http://localhost:8080

3、通过本机ip  192.168.1.75:8080

4 . 创建服务器

http .createServer（function(req,res){ }）.listen(端口号，function(){ });

写法：http.createServer(function(req,res){

             res.writeHead()//响应头

             res.write()   //返回数据，可以写多个

              res.end()  //服务器返回数据并断开连接，  必须有且只有一次

}).listen(端口号，function(){     });

                端口号：网络（1-1024）    本地（1024-65535）

             5 .方法

     1 .  res.writeHead(状态字，文件解释格式)     //响应头

                      res.writeHead(200,{“content-Type”:”text/html ;  charset=utf-8”}

(1).状态码：单设置  StartusCode=200;

200 服务器成功返回数据    404：文件没有找到

500：服务器错误  503：服务器超时

2 .文件解释格式  setHeader   只设置响应主体

单设置  SetHeader=content-Type:text/html  charset=utf-8

Text.html  解释标签   Text/plain  纯文本

     3 .  res.write ( “设置响应的数据” )  //返回数据，可以写多个

     4 . res.end()  //服务器返回数据并断开连接， 必须有且只有一次

5 .req.ur     拿到客户端输入的地址    要注意          /代表根目录

6 .req.method  拿到客户端的请求方式  默认都是get

6 .问题

修改服务器代码必须要重启服务器,重启的时候要终止服务。 

端口占用：  1、改端口   2、终止服务（小红点）

7 .

http://www.baidu.com:80/main/index.html?user=zf&pass=123#info_cc

http: 协议名                       www.baidu.com:服务器地址

/main/index.html :文件路径      user=zf&pass=123:查询字符串

#info_cc:片段标识符

19 .url模块

1 .方法

(1).url.parse(url字符串,true);

第二个参数为true,可以把query部分转化成对象

url对象里面会有个pathname属性，这个属性装的就是文件路径

[if !supportLists](2) [endif].url.format(对象)

可以把url对象转成url字符串    

2 .路由：

[if !supportLists]（1）[endif].通过用户在地址栏输入的url, 获取其中的文件路径，在服务器中做  匹配，  如果  用户输入的文件路径与服务器中的文件路径相同，就返回对应页面(通过fs模块加载页面并返回)，如果不存在就返回404

    Var   url   =require（“url”）

（2）.默认  /首页

search.html   搜索页面      news.html   新闻页面

（3）.查找路径的方法

        __dirname  绝对路径    __filename  当前文件的路径

20 .querystring  查询字符串

1 .作用:对http请求所带的数据进行解析

Var querystring =require （“querystring”）

2 .方法

（1）.parse（4个参数）字符串转化为对象

        Str:反序列化的字符串     Separator:设置分隔符默认&

        Eq :赋值符  默认=     Options :maxKeys :number类型最大长度字符串

（2）. stringify （）   对象转化字符串

        Obj:序列化的对象   separator:字符连接符  默认&

        Eq :连接值与字符  options：字符串换成百分比形式

（3）. get 方式

 向服务器发送请求时  拿数据是似地哪里拿不安全一般用 true

[if !supportLists]（4）[endif]. post 在后台传数据接数据

1 .传递  ：拼接字符串

2 . 方法

[if !supportLists]（1）[endif].req.on（“data”,function（data）{ }）

  不停触发data 事件，拿到客户端传输过来的数据通过拼接字符串把数据组合到一起 

格式：var str=“”；req.on（“data”,function（chunk）{str+=chunk}）

           3 .req .on（“end”，function（）{console.log（str）}）传递结束

AJAX

1 .什么是ajax:

   AJAX全称为“Asynchronous JavaScript and XML”

   AJAX =异步 JavaScript 和 XML。

   使用XMLHttpRequest对象与Web服务器进行异步数据通信；

   使用JavaScript绑定和处理所有数据。

   AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新.

2 .ajax的原理：

   Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化，

   Ajax的原理简单来说通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

3 .ajax的核心：

   Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成

4 .ajax的优缺点：

   优点：  1 .无刷新更新数据。   2 .异步与服务器通信。

        3 .前端和后端负载平衡 4 .界面与应用的分离

   缺点：  1 .无法后退    2.AJAX的安全问题    3 .AJAX不能很好支持移动设备。

5 .对象：

new XMLHttpRequest//  是对于现代浏览使用的

new ActiveXObject("Microsoft.XMLHTTP")  是对IE5\6这两个版本使用的

6 .处理兼容可以采用：  创建对象

        var xhr;

        if(window.XMLHttpRequest){

              xhr=newXMLHttpRequest();

        }elseif(window.ActiveXObject){

              xhr=newActiveXObject("Microsoft.XMLHTTP");

        }else{  alert("你的浏览器太垃圾，赶紧换");     }

7 .方法： 建立连接

   xhr.open(method,url,async)  与服务器进行连接  

        method:请求方式     get   post

        url：请求服务器上文件的路径，

        async: true（异步） false（同步）

8 .send()  发送请求

如果是get方式，  参数放一个null

如果是post方式，参数要放   请求的时候携带的数据

9 .属性:

1 .responseText 服务器返回的数据（字符串形式）

        responseXML          服务器返回的数据(XML格式)

2 .onreadystatechange   当XMLHttpRequest的状态被改变时，会触发这个事件

3 .readystate    这个参数表示的就是XMLHttpRequest的状态0   1   2  3   4

4 .status     服务器的状态        例如200   404   。

10 .写ajax的步骤：

1 .必须new 一个XMLHttpRequest   这么个对象

2 .与服务器进行连接   open()

3 .发送请求      send()

4 .监听状态有无改变     onreadystatechange

5 .判断状态码   

11 .post 与 get 的区别

   POST是发送数据，GET是接受数据；

   POST发送数据的安全性较好，而GET较差；

   POST发送数据不限制大小，而GET大小受限2~100k

12 .请求方式

如果ajax是get方式：

   服务器直接通过地址栏就可以获取到对应的参数

如果是post方式请求

   ajax这边需要3个步骤，

 GET->POST   setRequestHeader()    send(携带请求的参数)

服务器怎么接收参数：通过req.on("data")    和  req.on("end")  两个事件来接受

13 .ajax的post请求：

xhr.open('POST', url, true);//第一步：GET换成POST

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

//第二步：修改请求头，模仿form提交

xhr.send('user=guoyu&age=28');//第三步：要提交的数据放到send方法中

[if !supportLists]14. [endif]josn

1、什么是json?

   JSON指的是 JavaScript 对象表示法（JavaScript Object Notation）

   JSON是轻量级的文本数据交换格式

   JSON独立于语言

   JSON具有自我描述性，更易理解

2、JSON 语法规则

   遵守键值对

   每条数据逗号分隔，

   json中只存在{} 和  []

3、文件后缀名    .json

4、         JSON.parse()         字符串转对象

        JSON.stringify()    对象转字符串

5、JSON与XML的区别

   JSON更小更快更易简析          XML大小不易简析

[if !supportLists]15、[endif]JQ  ajax

1.

[if !supportLists]（1）[endif]  、*url   请求文件的地址

[if !supportLists]（2）[endif]、async  是否同异步 true异步

[if !supportLists]（3）[endif]、beforesend 请求发送前执行的回调函数

[if !supportLists]（4）[endif]、complete  请求之后执行的回调函数

[if !supportLists]（5）[endif]、data  发送到服务器的数据

[if !supportLists]（6）[endif]、dataType 服务器返回的数据类型  HTML

[if !supportLists]（7）[endif]、error :function（）{ }请求失败

[if !supportLists]（8）[endif]、success：function（）{ } 请求成功

[if !supportLists]（9）[endif]、type  请求方式

2.$.get的参数

[if !supportLists]（1）[endif]、url   地址 

[if !supportLists]（2）[endif]、data  携带的数据 

[if !supportLists]（3）[endif]、fn

[if !supportLists]（4）[endif]、type   数据返回的格式

[if !supportLists]3. [endif]$.post(  )  

4. $.getJSON(   )

5. $ .each( 数组，function（）{} ) 

16、跨域  

  1.是指浏览器不能执行其他网站的脚本，它是由浏览器对javaScript施加的安全限制

  2.同源策略 : 协议名  域名  端口相同

  3.解决跨域

     （1）、Access - Control - Allow - Origin : “*”=

     （2）、JSONP

var gulp=require("gulp");

gulp.task(任务名，[依赖任务]，function)

gulp.src(路径)  //匹配/找到某个文件

gulp.dest(路径)  //在何处生成文件

gulp.watch(要监听的文件路径，[当文件发生变化时要执行的任务]);

.pipe(连接的文件) 连接作用