less使用的三种方法
在客户端使用less
less是预处理语言
less的下载与使用
在客户端使用,必须要使用服务器的模式启动
- 为什么要用服务器模式启动,因为要发送请求,编译后返回数据,如果是本地,会导2致跨域的问题
- 首先你要在客户端下载less{less下载官网}
- 下载完成后,先导入你的XXX.less文件,再导入下载里面的less.js文件
导入时需要添加tyep=‘text/less’属性,不然浏览器不解析
less的语法
在xxxless文件中写变量
@width:200px;
@height:200px
div{
width:@width;
height:@height;
background:red;}
在服务端使用less
less的安装
可以装在本地的依赖中,
cnpm i less --save
可以装在全局的依赖中,
cnpm i less -g
混合(函数)模式使用less
- 第一种用法
.one(){//这里加括号了就不输出了,不加括号会输出
width:200px;
height:200PX
}
div{
.one()
}
- 第二种用法
.one(@col){//这里加括号了就不输出了,不加括号会输出
width:200px;
height:200PX;
color:@col;
}
div{
.one(red)
}
- 第三种用法
@代表变量
.one(@col=red){//这里加括号了就不输出了,不加括号会输出
width:200px;
height:200PX;
color:@col;
}
div{
.one()//不传就会有默认值red
}
- 用嵌套的方式写less
ul{
background:red;
li{
width:20px;
height:60px;
img{
margin:10px;
&:hover{//&代表父节点
background:pink;
}
}
}
}
less导入(模块化思想)
1. 在这个文件中,想导入其他less文件中的方法
@import “index”//导入index.less文件,使用里面的属性
2. 在这个文件中,想导入其他的css文件中的方法
@inport “index.css” //导入index.css文件,使用里面的属性
less运算
@w:200px;
@h:100px;
.one{
width:@w;
height:@h;
}
.two{
width:@w - 50;
height:@h + 20px;
}
less的编译
先写一个xxx.less文件,语法和客户端相同
@width:200px;
@height:200px
div{
width:@width;
height:@height;
background:red;}
编写完less之后,编译一下
lessc ./xxx.less ./XXX.css
这样就可以生成一个css文件,导入css即可使用
也可以使用自动编译程序 koala
koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,
下载kolal地址 kolal官网
- 里面可以设置为中文
- 将文件夹拖进kolal中,默认选择的就是自动编译,
- 现在你就可以随意改less文件,都会自动编译到css中
(推荐)VScode下载插件Easy LESS
使用起来很简便,只要安装Easy LESS
之后在less文件头部写上
// out: ../dist/app.css,
后面.css就是你要生成的css名字路径。
这样只要发生改变自动生成,很方便。