CSS扩展技术less

less是在原来的CSS基础上扩展一些编程语言
a.less语法：后缀名<.less>

    //变量的定义
    @color:blue;
    @body-color:blue;
    @div-color:blue;
    @w:100px;
    @h:100px;
    body{
        height:500px;
        border:1px solid @body-color;
    }
    div{
        width:@w;
        height:@h;
        border:1px solid @div-color;
    }
    p{
        color:@color;
    }
    //作用域《和顺序无关,选择最近的》
    @var:0;
    .class1{
        @var:1;
        .class{
            @var:2;
            three:@var;    
            @var:3;
        }
        one:@var;
    }
    //输出结果
    three:3;one:1;
b.混合

    //没有参数
    .whb{
        width:@w;
        height:@h;
        border:1px solid @div-color;
    }

    p{
        .whb;//直接调用
    }

    //传参数时
    .whb(@w,@h,@c){
        width:@w;
        height:@h;
        border:1px solid @c;
    }
    p{
        .whb(100px,100px,blue);//直接调用
    }

    //传参数时可以设置默认值@c默认为red,第一个写了默认值,后面最好都写默认值
    .whb(@w,@h,@c:red){
        width:@w;
        height:@h;
        border:1px solid @c;
    }
    p{
        .whb(100px,100px);//直接调用,颜色默认red,传参数时要匹配
    }

    //传参数时参数之间可以用,和;分开,两者间区别如下:
    .whb(@w;@h;@c:red){
        width:@w;
        height:@h;
        border:@c;
    }
    p{
        .whb(100px;100px;1px solid red);
    }
    
    //举例:<简化代码编写>
    .radius(@radius){
        -webkit-border-radius:@radius;
        -moz-border-radius:@radius;
        -o-border-radius:@radius;
        border-radius:@radius;
    }
    p{
        .whb(100px;100px;1px solid red);
        .radius(15px);
    }
@arguments变量
@rest变量
!important关键字
less判断功能<比较弱>:eg：darken颜色变深 lighten颜色变浅

c.嵌套<&当前选择器>

    .class1{
        .whb{100px,100px,red};
        .class2{
            .bfc
        }
        &:hover{
            text-decoration:none;
        }
        p &{
            background:red;//表示p.class1{background:red;}
        }
    }
d.导入

    @important"文件名"
e.替换

    //1
    @url-name:"1.jpg";
    @bg:"./image/@{url-name}";

    //2
    @selector:h1;
    @{selector}{
        color:red;
    }

转载于:https://www.cnblogs.com/yttbbd/p/4824664.html