编译型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

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

二、在Less技术中使用变量

定义变量：@变量名:变量值

使用变量：
（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技术中使用嵌套

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

公司首页

商品展示

物流服务

关于我们

@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;
    }
}

}

鼠标经过

li{

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

}

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

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

@height:50px;

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

五、混合（Mixin）

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

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

（2）调用混合：

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

有参混合：

.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中使用流程控制。

条件控制：
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);
```