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