less入门及语法了解

1.less官方网站：

英文：http://www/lesscss.org/
中文：http://www.lesscss.net/

2.less.js下载：

一.输入网址：http://www.lesscss.net
二.点击更新日志

三.点击less.js

四.点击右边的download zip

五.在下载到的文件夹里找到压缩包

六.点开找到less文件，dist/less
七.将less.min.js复制到项目文件里
八.在项目主页中引入：

如果不引入less.min.js的话，css将无任何效果

3.less变量（跟sass用法类似）

一.普通的变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
编译为：

#header {
  width: 10px;
  height: 20px;
}

二.作为选择器和属性名
使用时变量以@（变量名）的方式使用

三.作为URL

4.混合

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
如果我们希望在其它规则集中使用这些属性，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}
.bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了

5.Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
用 Less 语言我们可以这样书写代码：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用：

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}