1.下载依赖less和less-loader 或者 在创立我的项目时选定

npm install less@3.9.0 -g
npm install less-loader@4.1.0 -g
留神版本信息：在package.json文件中可查看

备注：卸载办法 npm uninstall less

2.查看是否装置胜利

lessc -v

3.胜利

4.援用

<style lang="less" scoped>

5.应用

  1. less中容许以变量的模式来定义，定义：@x:xx; 应用：@x;

    <template>    <div class="home"></div></template><style lang= "less" scoped> @color:red; @x:100px; .home{   width:@x;   height: @x;   background: @color; }</style>

    成果：

  2. 多层嵌套+变量计算

    <template>    <div class="home">      <div class="box1">        <div class="box2"></div>      </div>    </div></template><style lang= "less" scoped> @x:120px; .home{     width: @x;     height:@x;     background: red;     .box1{         width: @x/2;         height:@x/2;         background: green;         .box2{             width: @x/3;             height:@x/3;             background: blue;         }     } }</style>

    成果：

  3. 混合=函数

    <template>    <div>      <div class="box1">我是box1</div>      <div class="box2">我是box2</div>      <div class="box3">我是box3</div>    </div></template><style lang="less" scoped>//定义一个函数；.test(@color:red,@size:14px){  background: @color;  font-size: @size;}//不传参，应用默认的；.box1{.test()}// 给函数传参；.box2{.test(@color:green,@size:30px)}//批改一个参数.box3{.test(@color:#46ff17)}</style>

    成果：

  4. 能够对高度、宽度、角度进行计算

    <template>    <div>      <ul><li v-for="item in 3">{{item}}</li></ul>    </div></template><style lang="less" scoped>@k:20px;    ul{      list-style: none;        li{            border:1px solid ;            margin:10px 0 ;        }        li:nth-child(1){            width: @k;            height:@k;        }        li:nth-child(2){            width: @k + @k;            height:@k;        }        li:nth-child(3){            width: @k * 2;            height:@k;        }    }</style>

    成果：