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