Less學習

時間 2019-12-07

標籤學習简体版

原文原文鏈接

一、搭建環境

1.安裝nodejs,能夠去[官網][1]下載
2.打開cmd命令行，全局安裝less
    npm install less -g
3.輸入命令 lessc -v,若是出現版本號，則說明安裝成功，下面能夠編寫less代碼

二、less經常使用方法

變量:使用變量來控制CSS規則中的值,下面的例子聲明變量看起來好像有點畫蛇添足，可是當代碼量很大的時候就能看出來變量聲明是多麼的有必要，變量也能夠進行計算css

/*less代碼*/
   @wid : 22px;
   @hei : 33px;
   @color : #fff;
   .box{ 
       width : @wid-2;
       height : @hei-3;
       color : @color;
   }
   /*轉換爲css*/
   .box{ 
       width : 20px;
       height : 30px;
       color : #fff;
   }

混入：html

/*less代碼*/
   //可帶參數，參數能夠賦初始值，傳入參數的話能夠覆蓋初始值
   .border{
       border : 3px solid #00;
   } 
   .border-radius(@radius:5px){
       border-radius : @radius;
   }
   .box{
       width : 20px;
       height : 30px;
       .border;
       .border-radius(7px);
   }
   /*編譯後*/
   .box{
       width : 20px;
       height : 30px;
       border : 3px solid #000;
       border-radius : 7px;
   }

匹配模式：至關於if，else的功能，經過不一樣的參數選擇不一樣的樣式node

/*less編寫一個三角形*/
   .triangle(top,@wid:5px,@color:#ccc){
       border-width : @wid;
       border-color : transparent transparent @color transparent;
       border-style : dashed dashed solid dashed; 
   }
   .triangle(bottom,@wid:5px,@color:#ccc){
       border-width : @wid;
       border-color : @color transparent transparent transparent;
       border-style : solid dashed dashed dashed; 
   }
   .triangle(left,@wid:5px,@color:#ccc){
       border-width : @wid;
       border-color : transparent @color transparent transparent;
       border-style : dashed solid dashed dashed; 
   }
   .triangle(right,@wid:5px,@color:#ccc){
       border-width : @wid;
       border-color : transparent transparent transparent @color;
       border-style : dashed dashed dashed solid; 
   }
   //不管上面選擇使用哪個，下面這個都會帶上
  .triangle(@_,@wid：5px,@color:#ccc){
      width : 50px;
      height : 50px;
  }
  .box{
      .triangle(top,100px,#000);
  }
  /*編譯後代碼*/
  .box{
      width : 50px;
      height : 50px;
      border-width : 100px;
      border-color : transparent transparent #000transparent;
      border-style : dashed dashed solid dashed; 
  }

運算npm

/*less*/
   //只須要一個帶單位，後面進行計算的時候都會使用這個單位
   @fs : 14px;
   @wid : 320px;
   .box{
       font-size : @fs-2;
       width : @320 * 2;
   }
   /*編譯後*/
   .box{
       font-size : 12px;
       width : 640px;
   }

嵌套：至關於html的嵌套less

/*less代碼*/ 
   ul{
       @wid ： 100px;
       @hei : 100px;
       width : @wid;
       height : @hei;
       padding : @wid/5;
       li{
           margin : @hei/10;
           font-size : 22px;
           .border();
           a{
               color : #000;
               //&表明上一級元素
               &:hover{
                   color : red;
               }
           }       
       }  
       
   }
   .border(@wid:2px,@color:#ccc){
       border : @wid solid @color;
   }
  /*編譯後*/
  ul{
       width : 100px;
       height : 100px;
       padding : 20px;
  }
  ul li{
      margin : 10px;
      font-size : 22px;
      border : 2px solid #ccc;
  }
  ul li a{
      color : #000;
  }
  ul li a:hover{
      color : red;
  }

arguments : 表示所有參數spa

/*less*/
   .border(@wid,@solid,@color){
       border : @arguments;
   }
   .box{
       .border(30px,solid,#111)
   }
  /*編譯後*/
  .box{
      border : 30px solid #111
  }