关于前端:style-langless关于less的知识点

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>

   成果：