less的基本用法

less：css文本预处理器，它可以帮我们减少有关css中的大量重复工作。它增加了变量、函数、混合等特性，我对其中的我们经常用的做了个简单的总结，如下：

1. 变量的基本用法如下：

    使用@符号定义一个变量，例如@head_width:300px;

    2.混合用法，如下：

    .border_01{

        width:@head_width;

    }

    /*将定义的border_02代入border_02中*/

    .border_02{

        .border_01;

    }

    3.传递参数：

    .border_03(@head_width) {

           width:@head_width;

    }

    /*可以动态的传递参数*/

    .border_04{

        .border_03(30px);

     }

    默认参数值(使用:并在后面添加上具体的数据就可以了)：

    .border_05(@head_width:40px){}

    4.模式匹配（模式匹配指根据不同的参数，匹配不同类型的函数。这个有点类似于java中的重载）。例如：我们利用css定义一个三角形，这个三角形有上下左右四种形态。我们通过不同的参数来匹配不同的形态。

    .border_07(top, @color:blue) {

        width:0;

        height:0;

        overflow:hidden;

        border-style:solid;

        border-color: transparent transparent transparent @color ;

    }

 .border_07(bottom, @color:blue) {

        width:0;

        height:0;

        overflow:hidden;

        border-style:solid;

        border-color: @color transparent transparent transparent;

    }

 .border_07(left, @color:blue) {

        width:0;

        height:0;

        overflow:hidden;

        border-style:solid;

        border-color: transparent @color transparent transparent;

    }

 .border_07(right, @color:blue) {

        width:0;

        height:0;

        overflow:hidden;

        border-style:solid;

        border-color: transparent transparent @color transparent;

    }

   /*调用函数*/

 .border_08 {

    .border_07(top); //调用朝上的三角形，由于这个参数有默认值，所以不需要填写颜色参数

  }

模式匹配的时候，有部分代码是公共的，我们不必每次都在每个函数中去编写，所以，我们可以定义一个默认值：

    /*注意，使用@_表示默认值，less在编译的时候，会自动在调用匹配模式的时候添加上它。同时也不要忘记编写参数@color，这个不可省略*/

    .border_07(@_, @color:blue)

    {

         width:0;

         height:0

    };

 5.使用运算符来计算宽度高度等，以及颜色：

    .border_08(@head_width) {

        width:(@head_width - 20px) *5;

    }

6.&运算符，表示上一级选择器:

  <ul>

        <li><a href=''>测试</a></li>

  </ul>

.list{

    width: 20px;

    li{

        width:20px;

        &:hove {

            color:black;

        }

    }

}

7.避免less编译

例如：计算颜色；

width:-'calc(300px - 20px)';

calc是根据浏览器自动计算宽度的，所以，我们不能让它被编译，使用- ' '来不让他编译

这是我对less的一些简单用法的总结。如果其中有什么错误，希望大家指正。