less语法小结

标签：

注释：    /**/在编译后的文件里是保留的

            //在编译后的文件里没有

变量：   @变量名:值；

　　　　比如   @width:100px;

　　　　　　　.box{

            　　　    width:@width;

　　　　　　　}

混合:    .box{

　　　　　　with:100px;

　　　　　　height:100px;

　　　　　　.border;

　　　　}

　　　　.border{

　　　　　　border:1px solid red

　　　　}

混合（带参数带值）：

　　　　.box {

　　　　　　with:100px;

　　　　　　height:100px;

　　　　　　.border(10px);

　　　　}

　　　　.border(@width:1px) {

　　　　　　border:@width  solid  red

　　　　}

　　　　也可以只带参数不带值，但这样的话 .border 就仅仅是一个模板，不起实际作用了，另外，如果只带参数，那么引用的时候必须填值，如果带参数带值，可以.border()

匹配模式： 

　　　　.boxOne {

　　　　　　.border(second,10px)

　　　　}

　　　　.border(first) {

　　　　　　border：1px  solid  red

　　　　}

　　　　.border(second,@width) {

　　　　　　border：@width solid  red

　　　　}

　　　　.border(@_,@width) {

　　　　　　color:white;

　　　　}

运算：　@width:100px;

　　　　.border{

　　　　　　width:@width + 20

　　　　}

　　　　20可以带单位px，也可以不带单位，两个只要一个带单位就可以

嵌套：   a{

　　　　　　color:white;

　　　　　　&:hover{

　　　　　　　　color:red;

　　　　　　}

　　　　　　span{

　　　　　　　　width:10px;

　　　　　　}

　　　　}

less语法小结

标签：

原文地址：http://www.cnblogs.com/qian-yu-qian-xun/p/5942759.html