less初学2：嵌套规则，@arguments，避免编译，!important

less：嵌套规则
html：

<ul class="list">
    <li><a href="#">测试的文字</a><span>测试成功</span></li>
    <li><a href="#">测试的文字</a><span>测试成功</span></li>
    <li><a href="#">测试的文字</a><span>测试成功</span></li>
    <li><a href="#">测试的文字</a><span>测试成功</span></li>
</ul>

less：

.list{
    width:600px;
    margin:30px auto;
    padding:0px;
    list-style:none;

    li{
        height:30px;
        line-height:30px;
        background-color:pink;
        margin-bottom:5px;

        a{
            float:left;
            //&代表上一层选择器
            &:hover{ //其实就是a:hover
                color:red;
            }
            &:link{ //其实就是a:link
                decoration:none;
            }
        }

        span{
            float:right;
        }
    }
}

注意
1.a是包裹在li里面的，但是也可以跟li并排的写，差异在于css里面，a嵌套li里面会生成.list li a；并排写会生成.list a，效果上2种都是可以的。嵌套越多，寻找次数要多点，效率上低于嵌套少的。（个人觉得可以忽略，嵌套的写法清晰点）

2.关于CSS样式权重的问题。.list li a肯定比.list a的css同名属性效果级别高，显示的效果是.list li a的。

less：@arguments变量
用到的地方不多。

.border_arg(@w:30px,@c:red,@xx:solid){
    border:@w @c @xx; //原本这么写
    border:@arguments; //现在可以这么写
}

.test_arguments{
    .border_arg(40px)//只改其中一个变量，其他的不变，CSS里面会有40px,red,solid
}

避免编译（就是不编译）
less中：

.test{
    width:calc(300px - 30px) //calc是CSS3的一个属性，让浏览器去计算的。
}

对应css中

.test{
    width:calc(270px); //对应的css文件里却已经算了，但是前面的calc没法编译，我也不需要css给我直接计算出来270px，就想在css中也原封不动的输出。
}

less文件中应该这样写

.test{
    width:~'calc(300px - 30px);' //会原封不动在css中输出calc(300px - 30px)
}

!important：调试的时候可以用
在less中，某个类的属性值的最后面加上!important，应用该样式的级别最高。

less中：

.border_radius(@radius:5px){ //定义
 -webkit-border-radius:@radius;
 -moz-border-radius:@radius;
 border-radius:@radius;
}

.border_test{ //调用
.border_radius() !important //不传参，都默认的
}

对应的css

.border_test{
 -webkit-border-radius:5px !important;
 -moz-border-radius:5px !important;
 border-radius:5px !important;
}