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