LESS学习笔记（初学实用）

一、什么是less？

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
LESS官网（中文）：http://lesscss.cn/

二、less怎么用？

方式一：直接通过引入less.js文件，通过浏览器端来编译.less文件（类css文件），当然先要下载less.js文件放在项目文件中，目录就来个简单的。
—-less
—-images
—-js
index.html

<link rel="stylesheet/less" type="text/css" href="less/style.less">  
<script src="js/less-1.3.3.min.js" type="text/javascript"></script> 

.less文件是一定要在less.js文件之前引入的。我们也可以把.js文件放在</body>的前面。

方式二：通过编译工具将.less文件编译成css文件之后，在html文件中直接引用。
常用的编译工具有（新人知道这个就好了）Koala（考拉，国人自己开发）
–http://koala-app.com/index.html

三、less怎么写？

其实要写的话，你直接全部按照css去写也可以。当然，如果这样写的话就不需要less了，他主要是增加了变量、混合、函数、嵌套、命名空间、作用域等方便编码的写法。
比如：

@color:red;  
#header {  
    color: @color;  
}  
h2 {  
    color: @color;  
} 

编译之后就是

@color:red;  
#header {  
    color: red;  
}  
h2 {  
    color: red;  
} 

这样是不是对于好多相同的样式设置都不用写好多遍了。

1.注释（Comments）
和js一样，单行“//”和多行“/* /”。编译时会删除“//”保留“/ */”。
2.变量（Variables）

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}
//编译输出
#header {
  color: #6c94be;
}

3.混合（Mixins）

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}
//编译输出
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

4.嵌套（Nested Rules）

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover{
        color:red;//&表示父级
    }
  }
}
//编译输出
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#header .logo:hover {
  color:red;
}

5.匹配模式

.border{border: 2px solid #ccc; border-radius: 4px;}
//编译会出现在css文件中，如果是.border(){}则只会引用不会编译到css文件中。  
.header {.border;}  

//调用时一定要传参数，没有默认参数一定要带参数  
.border(@width, @color, @radius){border: @width solid @color; border-radius: @radius;}  
.header{.border(2px, #ccc, 4px);}  

//带默认参数，有默认参数可以带参数或者使用默认的 
.border(@width:2px, @color:#ccc, @radius: 4px){  
border: @width solid @color; border-radius: @radius;  
}  
.header {.border(4px, #f00, 2px);}  

//@arguments 指所有参数  
.border (@width:1px, @style:solid, @color:#ccc){border: @arguments;}   

6.地址（把地址当成常量）

// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

写到这里基础写法就不介绍了，大家上官网大概看一遍API就OK了，然后在工作中慢慢写慢慢学吧。
初学的话我建议先看一遍API然后写点简单的例子，然后看看bootstrap的less源码，你就知道那些你常用到的类是怎么写的了。展示一些常用的给大家看下。

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

.ie7-inline-block() {
  *display: inline; /* IE7 inline-block hack */
  *zoom: 1;
}

.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Border Radius
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

// Transitions
.transition(@transition) {
  -webkit-transition: @transition;
  -moz-transition: @transition;
  -o-transition: @transition;
  transition: @transition;
}

// Opacity
.opacity(@opacity) {
  opacity: @opacity / 100;
  filter: ~"alpha(opacity=@{opacity})";
}

以后像这种代码就不用重复写了是不是很爽。特别是那种要写内核兼容的。

最后给大家说一下我的less文件是怎么来写的。（目录–参考bootstrap）
目录：
–docs文档
–img图片
–less样式
|-variables.less变量
|-mixins.less混合
|-reset.less重置
|-layouts.less布局
|-sprites.less图标
–js插件
小文件的话直接全部写在一个文件里就好了，不过也可以分开写，通过import导入也是一样的。

开始用less写过几个页面之后就可以看看bootstrap中less和z.less是怎么写的了。然后也可以参照他们的写法调整到自己的工作用。
z.less:http://www.aibusy.com/zless/index.html