less和sass就是使用其他工具将某种格式的文本重新编译成css文件，好处在于方便工程管理、避免写大量的重复内容和利于维护。我们常常使用的方式是：写好less后在本地编译后使用编译后的css文件，虽然sass和less能做到请求时进行编译，但是会带来额外的开销，所以我们一般会本地进行编译，以下内容能让你在两个小时内迅速掌握less的使用。

    设置less的字符编码方式

@charset 'utf-8';


   调用其它已有的less文件(三种方式)


@import url('back.less');




@import 'back.less';




@import 'back';



    使用变量 

@bgcolor: #ab0;

body{
    background-color: @bgcolor;
}

    需要说明的是：为了以后维护和修改的方便，我们一般将变量写在各个文件的开始位置。

   简单混合的使用    

<div></div>




@bordercolor: #ab0;

.border{
    border: 1px solid @bordercolor;
}

div{
    width: 300px;
    height: 300px;
    .border;
}



    就是在其他选择器中调用已经有的类选择器。

    在混合中调用不同的参数

    在调用时传入不同的值就会得到不同的样式,遇到使用多个值的情况使用","隔开

.border(@bordercolor){
    border: @border solid 1px;
}

div{
    width: 300px;
    height: 300px;
    .border(red);
}



    当然有有多层混合使用的情况 

.border(@bordercolor){
    border: solid 1px @bordercolor;
}

.mix{
    .border(#ab0);
}



    在混合中使用默认值


.border(@bordercolor: #ab0){
    border: @bordercolor;
}

div{
....
    .border();
}



    使用默认值的混合类虽然可以直接使用.border调用,但是不建议这样使用，语义上是不明确的。只要文件中存在.border{}，不管有没有带参数和.border(){}是相同的，这时我们调用时要使用.border();明确自己使用的是什么，如果即有.border{},又有.border(){}最好将.border(){}写在.border()后面，就是使用层叠。由于.border(){}编译后不会以直接形式存在于最终文件中，所以使两种写法都会有效。


    匹配模型

    我们要在工程中使用各种方向的三角形

@trianglecolor: #ab0;

/* 向上的三件形 */
.triangle(top,@width,@color){
    border-width: @width;
    border-color: transparent transparent @color transparent;
    border-style: dashed dashed solid dashed;
}

/* 向右的三角形 */
.triangle(right,@width,@color){
    border-width: @width;
    border-color: transparent transparent transparent @color ;
    border-style: dashed dashed dashed solid;
}

/* 向下的三角形 */
.triangle(bottom, @width, @color){
    border-width: @width;
    border-color: @color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}

/* 向左的三角形 */
.triangle(left, @width, @color){
    border-width: @width;
    border-color: transparent @color transparent transparent;
    border-style: dashed solid dashed dashed; 
}

span{

    height: 0;
    .triangle(left,10px,@trianglecolor);
}



    在span中我们在.triangle(top,...)调用不同的朝向就是不同的三角形。

    假如你自己写了以上代码，会出现梯形而不是三角线，这是因为浏览器会有默认元素的宽和高。我们要将每一个朝向都添加清除浏览器默认显示,难道每一个都再写一遍吗？

.triangle(@_, @width, @color){
    display: block;
    padding: 0;
    width: 0;
    overflow: hidden;
}



    这样写的目的就是当在调用时，都默认调用一次样式，就解决了上面的问题。


    使用运算符

div{
    width: 100px;
    height: 100px - 20;
    background: #abc;
}


    实际上在less中内置了很多函数，这里就不再介绍。

    嵌套使用

<body>
    <ul>
        <li>项目一</li>
        <li>项目二</li>
        <li>项目三</li>
        <li>项目四</li>
        <a href="#">1234</a>
    </ul>
</body>
ul{
    width: 300px;
    margin: 0 auto;
    margin-top: 30px;
    list-style: none;
    background-color: #ab0;

    li{
        margin-top: 5px;
        background-color: #ccc;
        /* 相当于ul li:hover{} */
        &:hover{
            background-color: #def;
        }
    }
    a{
        color: #191919;
        font-size: 16px;
        text-decoration: none;
        &:hover{
            background-color: red;
        }
    }
}


    特别注意&:的方便使用

    使用arguments一组参数使用

    很多css样式要调用一组样式，为了方便调用我们使用arguments 

.border(@width:1px,@color:red,@style:solid){
    border: @arguments;
}


         使用~告诉编译器不要编译该部分内容 


div{
    width: ~'cale(300-20s)';
}


    使用!importan

t

    !important和css中使用是一样的


div{
     .border() !important;
}