首页 > 代码库 > less语法小结

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语法小结