less 的一些基础知识（简单易学）

今天我来总结一下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