编译型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
  }
  1. （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;
		}
	}
}
  1. 鼠标经过
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;
}
  1. （2）调用混合：
.demo{
	.fontStyle();
}
.demo{
	#box();
}
  1. 有参混合：
.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）在混合中使用匹配模式：

将less编译为css_less

<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)
}
  1. 循环控制
    本质是使用混合的递归调用。
    如何在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);