CSS扩展技术-less

在原来的CSS基础上扩展一些编程语言

CSS引用扩展技术时需要编译器编译<编译工具Koala

1.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;
}