1.node.js 安装
1.1node.js 在网上自行下载
下载好后,会有以下目录,x86是32位的电脑,x64 是64位的电脑
2检测nodejs是否安装好了,
a.直接在右下角时输入cmd
b.直接快捷键:win+R然后在弹窗里面输入cmd回车
c.检测是否安装完成 node –v 查看版本
出现这个就说明已经安装成功
d.通过这个node来安装我们的less (两种安装方法:1.离线 2.在线)
1.2.在线安装less:
- lessc –v 查看版本 是否安装成功
- lessc –v 查看版本 是否安装成功
1.3离线安装:
1.如果APPData是隐藏的,C>用户>当前用户目录>查看>选项
删除已安装的less 首先打开C盘>用户>459233>APPData>Roaming>npm>删除掉里面的文件(删除的是刚刚在线安装的less)>lessc –v (检测是否删除掉了)
找到npm压缩包放到npm文件中(刚刚删除的文件里面)>解压到当前文件夹>剪切npm文件里面的文件放到跟npm同级,然后在删除npm文件夹,最后如图
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文件
引用代码案例:
注意:它是异步的加载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