Less学习

一 、搭建环境

1.安装nodejs,可以去[官网][1]下载
2.打开cmd命令行，全局安装less
    npm install less -g
3.输入命令 lessc -v,如果出现版本号，则说明安装成功，下面可以编写less代码

二 、less常用方法

1. 变量:使用变量来控制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;
      }        

2. 混入：

      /*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;
      }

3. 匹配模式：相当于if，else的功能，通过不同的参数选择不同的样式

      /*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; 
     }

4. 运算

      /*less*/
      //只需要一个带单位，后面进行计算的时候都会使用这个单位
      @fs : 14px;
      @wid : 320px;
      .box{
          font-size : @fs-2;
          width : @320 * 2;
      }
      /*编译后*/
      .box{
          font-size : 12px;
          width : 640px;
      }
   

5. 嵌套 ：相当于html的嵌套

      /*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;
     }
   

6. arguments : 表示全部参数

      /*less*/
      .border(@wid,@solid,@color){
          border : @arguments;
      }
      .box{
          .border(30px,solid,#111)
      }
     /*编译后*/
     .box{
         border : 30px solid #111
     }
     

三、编译方法

编写时我们编的是less代码，但是我们网页中引用的是css代码，所以我们编写完less后首先要进行编译，第一步我们已经全局安装好了less，接下来，打开命令行到项目目录下，输入

    lessc index.less index.css

目录下就会多一个index.css文件，结束！！！