初识less：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>less</title>
<!-- 需要在这里让type="text/less"，并且结合body下的script引入less.js才能使用 -->
<style type="text/less">
.le1 {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
.le11 {
width: 100px;
height: 100px;
background-color: blue;
}
}
</style>
</head>
<body>
<div class="le1">
<div class="le11"></div>
</div>
</body>
<script src="../less/less.js" type="text/javascript"></script>
</html>
less知识汇总：le2.html：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>less2</title>
<!-- 这里引用koala把.less文件编译成.css文件，这个html下面可以不再引用js文件了 -->
<link rel="stylesheet" href="../css/le2.css" target="_blank" rel="external nofollow" >
<!-- 还没有通过koala生成css的时候，需要在这里让type="text/less"，并且结合body下的script引入less.js才能使用 -->
<!-- <style type="text/less">
.le1 {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
.le11 {
width: 100px;
height: 100px;
background-color: blue;
}
}
</style> -->
</head>
<body>
<div class="le1">
<div class="le11"></div>
<div class="le12"></div>
<div class="le13"></div>
<div class="le14"></div>
</div>
</body>
<!-- <script src="../less/less.js" type="text/javascript"></script> -->
</html>
le2.less：
//以“//”开头的注释，不会编译到css文件当中，以“”包裹的注释会被编译到css文件夹中
//注释11111
//声明变量（一个属性的值，直接引用）
@color:rgb(2, 255, 2);
//声明变量（一个属性名，用{}引用）
@m:margin;
@bg:background-color;
//声明变量（一个选择器，用{}引用）
@class1:.le11;
//less混合,把相同的属性放到一个变量里面，然后在需要的样式表里面调用（类似于声明变量，变量名.hunhe）
//普通混合，不带参数。
//还有带参数的混合，用逗号隔开.hunhe（@w，@h，@bc），这个不叫函数，叫mix in
//在.hunhe（）调用的时候，如果只想给它指定某一个参数，如只给@bc一个红色，可以在调用时这么写
//.hunhe(@bc:red);命名参数
//在下面调用.hunhe（@w，@h，@bc）的时候，如果没有写参数，可以使用默认值
//.hunhe（@w:10px，@h:10px，@bc:green）带默认值的混合
// .hunhe(@w,@h,@bc){
// width: @w;
// height: @h;
// @{bg}:@bc;
// }
//还可以在css文件夹里面写一个单独文件hunhe.less，把这个.hunhe(@w,@h,@bc){}放到hunhe.less中
//在这里通过@import"css/hunhe.less"调用
@import "./hunhe.less";
.le1 {//这里写成这个样式，然后将这个文件的文件夹放到koala里面生成le2.css，然后摘html中还是引用le2.css
width: 300px;
height: 300px;
.bo(1px,solid,red);//在hunhe中定义的bo，类似于混合，这里向hunhe里的bo传递了三个参数
@{m}: 0 auto;
@{class1} {//相当于".le11"
.hunhe(100px,100px,green);//调用混合的方法（直接写）
//@{bg}: @color;
}
.le12{
.hunhe(100px,100px,blue);//调用混合的方法（直接写）
//@{bg}: rgb(84, 12, 94);
&:hover{//这里必须用&（&符号表示以上的所有选择器）符号，否则就会认为是父子选择器，中间会有一个空格
@{bg}: rgb(165, 236, 33);
}
}
//继承一个样式
.le13:extend(.in){
}
//可以被多个类继承
.le14{
&:extend(.in all);
}
}
le2.less编译后生成的le2.css文件：
.in,
.le1 .le13,
.le1 .le14 {
width: 40px;
height: 40px;
border: 2px solid rebeccapurple;
}
.in:hover,
.le1 .le14:hover {
background-color: red;
}
.le1 {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
}
.le1 .le11 {
width: 100px;
height: 100px;
background-color: green;
}
.le1 .le12 {
width: 100px;
height: 100px;
background-color: blue;
}
.le1 .le12:hover {
background-color: #a5ec21;
}
hunhe.less文件：
.hunhe(@w,@h,@bc){
width: @w;
height: @h;
@{bg}:@bc;
}
.bo(@1,@2,@3){
border:@arguments;//接收前端传递过来的bo的所有参数
}
//写在这里让html继承，为了避免让生成的.css文件还是复制那么多的代码
//继承后生成的.css的代码会减少许多，继承后生成的样式
// .in,
// .le1 .le13,
// .le1 .le14 {
// width: 50px;
// height: 50px;
// border: 2px solid rebeccapurple;
// }
//共两种写法
//.le13:extend(.in){}
//.le14{&:extend(.in all);}通过all可以把.in:hover{}属性
.in{
width: 20+20px;//在less中可以进行+-*/的计算
height: ~"40px";//~""在这里就是避免编译，会原封不动的编译成css文件
border:2px solid rebeccapurple;
}
//一个跟in有关的属性，在前台可以用，继承后生成的样式
// .in:hover,
// .le1 .le14:hover {
// background-color: red;
// }
.in:hover{
background-color: red;
}
![宝塔下安装nodejs宝塔下安装node.js[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)