移动web开发(七)—— less

1.node.js 安装

1.1node.js 在网上自行下载

下载好后，会有以下目录，x86是32位的电脑，x64 是64位的电脑

20170217110452.png

2检测nodejs是否安装好了，
a.直接在右下角时输入cmd
b.直接快捷键：win+R然后在弹窗里面输入cmd回车
c.检测是否安装完成 node –v 查看版本

20170217110651.png

出现这个就说明已经安装成功

d.通过这个node来安装我们的less (两种安装方法：1.离线 2.在线)

1.2.在线安装less：

2. lessc –v 查看版本 是否安装成功

20170217111019.png

2. lessc –v 查看版本 是否安装成功

1.3离线安装：

1.如果APPData是隐藏的，C>用户>当前用户目录>查看>选项

20170217111623.png

2. 删除已安装的less 首先打开C盘>用户>459233>APPData>Roaming>npm>删除掉里面的文件(删除的是刚刚在线安装的less)>lessc –v (检测是否删除掉了)

3. 找到npm压缩包放到npm文件中(刚刚删除的文件里面)>解压到当前文件夹>剪切npm文件里面的文件放到跟npm同级，然后在删除npm文件夹，最后如图

20170217111701.png compare.png

less学习网站

        [官网](http://lesscss.org/)
        [中文网](http://lesscss.cn/)

2.less语法学习

2.1 变量

@mianColor #333;

body{
    color:@mainColor;
}

2.2 Mixin(混入)

/*颜色*/
.red{
  color: @mainColor;
}
.border{
  border: 1px solid #ccc;
}
.redBorder(){
  color: @mainColor;
  border: 1px solid #ccc;
}
.mixin-class{
  .red();
  .border();
}
.mixin-fuc{
  .redBorder();
}

2.3嵌套

#wjs_banner{
  .carousel-inner{
    > div.item{
      a.img_box{
        background: url("../images/slide_01_2000x410.jpg") no-repeat center center;
        height: 410px;
        /*调用redBorder mixin*/
        display: block;
        .redBorder();
        /*调用@mainColor 变量*/
        &:hover{
          color: @mainColor;
      }
      }
      a.img_mobile{
        width: 100%;
        display: block;
        img{
          width: 100%;
          display: block;
        }
      }
    }
  }
}

2.4导入（import）

@import "base";

2.4函数（fn）

函数很多，要使用的话可以到官网上自行查询

最常用函数：fade(@color, 50%); // 设定透明度为 50%

3.less在浏览器上使用

在浏览器是使用less的话我们需要添加一个js插件
less.js 解析less文件动态加载head当中
这样了引用less文件

引用代码案例：

搜狗截图20170217171217.png

注意：它是异步的加载less文件然后解析

一定要求是 使用http形式访问否则无法加载less文件

不建议使用lessjs这种形式来用less

4.bootstrap自定义

方法一：使用本地node.js的less 自行编译（不建议使用）

方法二：使用bootstrap官网上面的定制即可，然后下载。（建议使用）

5.rem和em

5.1 rem 和 em 的区别

 em的大小是根据父类元素的font-size来设置的
  rem的大小是根据 html标签的font-size来设置的

5.2 rem 和 em 设置默认大小

em 和 rem 都有一个默认的初始大小 大小为16px

5.3 rem主要运用于响应式方面