less简单的入门知识总结

怼烎@ 2022-06-14 09:10 178阅读 0赞

**less的注释：**

/**/    会编译出来，作为注释保存在css文件里面
    // 仅仅是注释，不会再被编译

**less的变量**

//@变量名:变量值;
    @red:red;
    body{
        background:@red;
    }
    
    //编译结果
    body{
        background:red;
    }

**less混合**

//@变量名:变量值;
    @red:red;
    .box{
        background:@red;
        .border
    }
    .border{
        border:1px solid black;
    }
    
    //编译结果
    .box{
        background:red;
        border:1px solid black;
    }
    .border{
        border:1px solid black;
    }

**less混合—-可带参数**

//@变量名:变量值;
    @red:red;
    .box{
        background:@red;
        .border(1px);
    }
    .border(@size){ 
        border:@size solid black;
    }
    
    //编译结果
    .box{
        background:red;
        border:1px solid black;
    }
    .border{
        border:1px solid black;
    }

**less混合—-默认带值**

//@变量名:变量值;
    @red:red;
    .box{
        background:@red;
        .border();//一定得带括号，当需要更改值时，.border(2px);
    }
    .border(@size：1px){ 
        border:@size solid black;
    }
    
    //编译结果
    .box{
        background:red;
        border:1px solid black;
    }
    .border{
        border:1px solid black;
    }

**less匹配模式**

//相当于if
    
    .triangle(top,@w:5px,@c:#ccc){ //向上三角形
        border-width: @w;
        boeder-color: transparent transparent @c transparent;
        border-style: dashed dashed solid dashed; //使用dashed设置虚线样式，确保ie下面正常显示三角形
    }
    .triangle(bottom,@w:5px,@c:#ccc){ //向下三角形
        border-width: @w;
        boeder-color: @c transparent transparent transparent;
        border-style: solid dashed dashed dashed;
    }
    .triangle(left,@w:5px,@c:#ccc){ //向左三角形
        border-width: @w;
        boeder-color: transparent @c transparent transparent;
        border-style: dashed solid dashed dashed;
    }
    .triangle(right,@w:5px,@c:#ccc){ //向右三角形
        border-width:@w;
        boeder-color:transparent transparent transparent @c;
        border-style:dashed dashed dashed solid;
    }
    .triangle(@_,@w:5px,@c:#ccc){   //@_表示无论何时，引用.triangle都会加载这里面的内容
        width:0;
        hoght:0;
        overflow:hidden;
    }
    .sanjiao{
        .triangle(top);//top表示调用.triangle(top,@w:5px,@c:#ccc)绘制向上的三角形,可以调用left right bottom
    }

**less运算**

@test_01:100px;
    @test_02:2;
    @add=@test_01+@test_02;//102px  只需要一个有单位即可，加减乘除都可以

**less嵌套**

ul{
        width:600px;
        height:300px;
        margin:30px auto;
        padding:0;
        li{
            height:30px;
            line-height:30px;
        }
        a{
            color:blue;
            &:hover{      //&代表上一层选择器,&现在等于a
                color:red;
            }
        }
    
    }
    
    //编译后的结构
    ul{
        ...
    }
    ul li{
        ...
    }
    ul a{
        ...
    }
    ul a:hover{
        ...
    }

**less—-@arguments变量**

.border(@w:2px,@c:red;@s:solid){
        border:@arguments;//@arguments代替了所有定义的变量相当于 border:@w @c @s;
        //需要更改值时，直接给@arguments赋值@arguments(40px);相当于@w=40px;
    }

**less—-避免编译**

.test{ width:~'calc(300px-30px)';//~""或者~''里面的内容不会被编译 }

**less—-!important**

.test{
        .border() !important;
    }

**less—-导入其他文件**

@import "a.css";//导入css文件，写在什么位置，就在什么位置引入
    @import(less) "a.css";//作为less导入
    @import "a";//导入less文件