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);
}

[/code]
@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;}
}
}

[/code]
d.导入

@important"文件名"

e.替换[/code]

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

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