<style lang="less">关于less的知识点

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

npm install [email protected] -g
npm install [email protected] -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>

   效果：