less

    xiaoxiao2026-05-10  1

    1.注释

    /**/这种注释编译后css中被保留

    //不保留

    2.变量@

    3嵌套 dom结构

    .div{

          a{

           &:hover{

           }}

           &-abc{}

    }

    4混合

    .div{

        width:330px;

        .hh;

        .hh_02(30px);

        .hh_03();

    }

    .hh{height:40px;}

    混合可带参数(函数式编程)

    .hh_02(@border_width){border:solid yellow @border_width}

    混合默认值

    .hh_03(@border_width:10px){border:solid yellow @border_width}

    5匹配模式

    .sanjiao{

    .triangle(top);

    }

    .triangle(top,@w:5px,@c:#ccc){

    border-width:@w;

    border-color:transparent transparent@c transparent

    border-style:dashed dashed solid dashed;

    }

    .triangle(bottom,@w:5px,@c:#ccc){

    border-width:@w;

    border-color:@c transparent transparent transparent

    border-style:solid dashed dashed dashed;

    }

    // 无论选择哪一个,都会把这个样式带上

    .triangle(@_,@w:5px,@c:#ccc){

    width:0;

    height:0;

    overflow:hidden;

    }

    6运算

    @test_01:300px;

    .box_02{

    width:(@test_01+20)*5;(有一个带单位也可以)

    }

    7@arguments

    .border_arg(@w:30px,@c:red,@xx:solid){

    border:@arguments

    }

    .test_arguments{

    .border_arg(40px);}

    转载请注明原文地址: https://ju.6miu.com/read-1309549.html
    最新回复(0)