编译型CSS（Less）

编译型HTML：模板引擎（Pug）。

编译型CSS：less、sass、stylus。

一、如何搭建Less的运行环境

1、Vue项目下的Less：

（1）利用npm下载Less：

npm install less --save-dev
npm install less-loader --save-dev
//less-loader的最高版本：6.0

（2）卸载最高版本less-loader，下载4.1.0版本。

npm install less-loader
npm install less-loader@4.1.0 --save-dev

（3）配置web-pack：@\build\webpack.base.conf.js

{
	test:/\.less$/,
	loader:'style-loader!css-loader!less-loader'
}

（4）在单组件文件.vue中

<style lang="less">
	//less代码
</style>

2、uni-app项目下的Less

工具 | 插件安装：less编译（安装）
在但组件文件.vue中：<style lang="less"></style>

3、原生开发下如何使用Less

1. 使用编译型CSS必须在服务器下操作。
2. 新建本地文件：<link rel=“stylesheet/less” type=“text/css” href=“style/index.less” />
3. 在less官网上下载less.js文件：<script src=“js/less.min.js”></script>

二、在Less技术中使用变量

1. 定义变量：@变量名:变量值
2. 使用变量：
   （1）变量可以作为css属性的取值：@变量名

   @co:#3358ff;
     .box{
       color:@co
     }
   

   （2）变量作为CSS属性取值以外的用法：@{变量名}

   <div class="first">我是first</div>
   

   @fi:first;
   @bgc:background-color;
   .@{fi}{
   	color: #ff5857;
   	@{bgc}:#0f0;
   }
   

   

三、在Less技术中使用嵌套

1. 普通嵌套：根据HTML标记对的嵌套关系实现

<div id="demo">
	<ul class="ul">
		<li><a href="#">公司首页</a></li>
		<li><a href="#">商品展示</a></li>
		<li><a href="#">物流服务</a></li>
		<li><a href="#">关于我们</a></li>
	</ul>
</div>

@back:#c2d3c1;
#demo{
	width: 100%;
	height: 50px;
	background-color: @back;
		.ul{
		width: 1200px;
		height: 50px;
		background-color: #ff5857;
		margin: 0 auto;
		display: flex;
		li{
			width: 25%;
			height: 100%;
			text-align: center;
			line-height: 50px;
		}
	}
}

2. 鼠标经过

li{
	width: 25%;
	height: 100%;
	text-align: center;
	line-height: 50px;
	&:hover a{
		text-decoration: underline;		//&表示上一层级的选择器
	}
	a{
		color: #7fa96a;
	}
}

四、Less运算：+ - * / ()

1. +用来表示数值相加，不能表示字符串连接。
2. 运算符两侧的运算数有一侧带有单位即可。
3. 运算符与运算数之间必须带有空格。

@height:50px;
#demo{
	width: 100%;
	height: @height + 20px;
}

五、混合（Mixin）

1. 无参混合：
   （1）创建混合：

   .fontStyle{
   	font-size: 20px;
   	color: #3385ff;
   }
   #fontStyle(){
   	font-size: 20px;
   	color: #ff5857;
   }
   #box(){
   	font-size: 50px;
   }
   

   （2）调用混合：

   .demo{
   	.fontStyle();
   }
   .demo{
   	#box();
   }
   

2. 有参混合：

.fontStyle(@fs,@color,@ff){
	font-size: @fs;
	color: @color;
	font-family: @ff;
}
.fa{
	.fontStyle(20px,#ff5857,Microsoft YaHei);
}
.fb{
	.fontStyle(16px,#3385ff,SimSun);
}
.fc{
	.fontStyle(26px,orange,SimHei);
}

（1）混合中的形参可以带有默认值：

.fontStyle(@fs,@color:#d8ad7a,@ff){
	font-size: @fs;
	color: @color;
	font-family: @ff;
}

（2）Less混合中实参向形参的传递时按照参数名来进行传递的。

.fd{
	.fontStyle(@color:gray,@fs:30px,@ff:Microsoft YaHei);
}

（3）使用@arguments表示传递过来的所有参数。

.borderS(@style,@width,@color){
	border: @arguments;
}
.demo{
	.borderS(solid,1px,#f00)
}

（4)使用@rest表示剩余的参数。

.borderS(@bgc,@rest...){
	background-color: @bgc;
	border: @rest;
}
.demo{
	.borderS(#3385ff,solid,1px,#f00)
}

/*或者写为：*/
.borderS(@rest...){
	border: @rest;
}

（5）在混合中使用匹配模式：

<div id="box">我使用了编译型CSS：less</div>
<div id="fox">我使用了编译型CSS：less</div>

.st(abc,@a,@b){
	font-size: @a;
	color: @b;
}
.st(xyz,@a){
	text-align: @a;
}
#box{
	.st(abc,18px,#f00);
}
#fox{
	.st(xyz,right);
}

例：制作四个方向的三角形（此案例为向上）：

<div class="box"></div>

.triangle(top,@width,@color){
	border-color: @color transparent transparent transparent;
}
.triangle(right,@width,@color){
	border-color: transparent @color transparent transparent;
}
.triangle(bottom,@width,@color){
	border-color: transparent transparent @color transparent;
}
.triangle(left,@width,@color){
	border-color: transparent transparent transparent @color;
}
.triangle(@_,@width,@color){
	width: 0;
	height: 0;
	border-style: solid;
	border-width: @width;
}
.box{
	.triangle(bottom,20px,#3385ff);
}

六、嵌套混合/命名空间：

<div id="box">
	<button class="btn">按钮1</button>
</div>
<button class="btn2">按钮2</button>

#box{
	.btn{
		color: #3385ff;
		width:80px;
		height: 30px;
		border: 1px solid gray;
		&:hover{
			background-color: #ff3857;
		}
	}
}
.btn2{
	/*方法一*/
	#box.btn();
	/*方法二*/
	#box > .btn();
}

七、混合引导（Minxin Guards）

在Less中使用流程控制。

1. 条件控制：
   when(条件1) and | , (条件2)
   逻辑与：and
   逻辑或：，
   逻辑非：not
   例：根据元素的宽度（200px）设置背景颜色。元素宽度大于200px，背景颜色为@ff857；元素宽度小于200px，背景颜色为#3385ff；

   .setBgc(@width,@height) when(@width>200px){
   	width: @width;
   	height: @height;
   	background-color: #ff5857;
   }
   .setBgc(@width,@height) when(@width<=200px){
   	width: @width;
   	height: @height;
   	background-color: #3385ff;
   }
   .box1{
   	.setBgc(150px,220px)
   }
   .box2{
   	.setBgc(220px,220px)
   }
   

   2. 循环控制
      本质是使用混合的递归调用。
      如何在Node环境下全局使用Less技术。
      （1）全局安装Less：npm install -g less
      （2）在本地新建一个文件夹：例如文件夹less
      （3）在该文件夹中编译less代码
      （4）在cmd中进入该文件夹，并编译less文件：less index.less index.css
      例：制作一个自动栅格系统：

      .grid(@n,@i:1) when(@i<=@n){
      	.col-@{i}{
      		width:@i*100%/@n
      	}
      	.grid(@n,@i+1)
      }
      .grid(24);