今天我来总结一下less的一些基础知识。非常简单,一般看半天基本就可以上手。
一、less 定义常量、混合、带参数的混合、@arguments。
1. less可以定义常量:
@blue:#846; // 颜色
@width:200px; //宽度
.Div{
.width;
height:400px;
background:@blue;
}
解析成css:
Div{
width:200px;
height:400px;
background:#846;
}
2.混合、带参数的混合
混合:
.widthHeight{width:300px;height:300px}
.Div{
.widthHeight;
background:red;
}
解析成:
.Div{
width:300px;
height:300px;
background:red;
}
带参数的混合:
.border-radius (@raduis){
border-radius:@raduis;
-ms-border-radius:@raduis;
-webkit-border-radius:@raduis;
-moz-border-radius:@raduis;
}
.Div{
width:200px;
height:400px;
.border-radius(60px);
}
解析成:
.Div{
width:200px;
height:400px;
.border-radius(60px);
border-radius:60px;
-ms-border-radius:60px;
-webkit-border-radius:60px;
-moz-border-radius:60px;
}
如果你想有参数有默认值得话可以这样写
.border-radius (@raduis:10px){
border-radius:@raduis;
-ms-border-radius:@raduis;
-webkit-border-radius:@raduis;
-moz-border-radius:@raduis;
}
3.@arguments
@arguments 中存储着所有的参数,如果你不想每个参数都写一遍可以用它。
.border (@w:10px,@type:solid, @colr:#938413) {
border:@arguments;
}
.Div{
width:200px;
height:400px;
background:blue;
.border(20px,solid,#983493);
}
解析成:
.Div{
width:200px;
height:400px;
background:blue;
.border(20px, solid, #983493);
}
4.地址拼接
@base-url: "http://www.webxiaoma.com";
background-image: url("@base-url/images/bg.png");
二、less 嵌套规则。
我们可以这样嵌套:
.Div{
height:400px;
background:@blue;
font-size:20px;
color:white;
.myP{
width:200px;
height:200px;
line-height:200px;
&:hover{
color:red;
}
}
}
解析成:
.Div{
height:400px;
background:@blue;
font-size:20px;
color:white;
}
.Div .myP{
width:200px;
height:200px;
line-height:200px;
font-size:20px;
color:white;
}
.Div .myP:hover{
color:red;
}
① 这样写 类名为 .myP 的元素会继承 类名为 .Div 元素的一些样式 (类名为 .myP 的元素 是类名为 .Div 元素的子元素)
② 一些伪类元素 如 after before hover link active 等用特殊字符 &
这样写
&:hover{
color:red;
}
另一个
.Div{
height:400px;
background:@blue;
font-size:20px;
color:white;
.myP{
width:200px;
height:200px;
line-height:200px;
&:hover{
color:red;
}
}
}
.DivTwo{
width:100px;
height:100px;
.Div>.myP // 直接嵌套
}
三、less 的作用域。
1.less 的作用域 是逐级向上查找的。也就是说,在查找css样式时,如果在自己作用域中没有查到,会想父级去查找,如果还没有找到,会一直向上去查找,直到找到为止。
四、Importing
1.在less 文件中我们可以引入额外的less文件:
@import "header.less";
// 或者是
@import "header";
2.如果你想不让less 编译css文件,直接将文件后缀改为 .css
header.css