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