使用less的三种方式详解

在客户端使用less

less是预处理语言

less的下载与使用

在客户端使用，必须要使用服务器的模式启动

1. 为什么要用服务器模式启动，因为要发送请求，编译后返回数据，如果是本地，会导2致跨域的问题
2. 首先你要在客户端下载less{less下载官网}
3. 下载完成后，先导入你的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

1. 第一种用法

.one(){
     //这里加括号了就不输出了，不加括号会输出
width:200px;
height:200PX
}
div{
     
	.one()
}

2. 第二种用法

.one(@col){
     //这里加括号了就不输出了，不加括号会输出
width:200px;
height:200PX;
color:@col;
}
div{
     
	.one(red)
}

3. 第三种用法

@代表变量
.one(@col=red){
     //这里加括号了就不输出了，不加括号会输出
width:200px;
height:200PX;
color:@col;
}
div{
     
	.one()//不传就会有默认值red
}

4. 用嵌套的方式写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官网

1. 里面可以设置为中文
2. 将文件夹拖进kolal中，默认选择的就是自动编译，
3. 现在你就可以随意改less文件，都会自动编译到css中

（推荐）VScode下载插件Easy LESS

使用起来很简便，只要安装Easy LESS
之后在less文件头部写上

// out: ../dist/app.css,

后面.css就是你要生成的css名字路径。
这样只要发生改变自动生成，很方便。