less的学习（css）

因为新公司需要用less来写样式，对于用惯了css的我来说还是觉得有点麻烦

但是呢，都是有个过程嘛，学习必须走起嘛。

写到半中央发现一个写的特别好的less帖子，就不写。

http://www.w3cplus.com/css/less（转载）

http://www.bootcss.com/p/lesscss/（转载）（又发现一个）

1.less的简介（定义+为什么用less）

CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。

作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。

2.less的用法

1.基础用法

清单 1. LESS 文件

@color: #4D926F; 

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

@var: 1px;
body {
  border: @var solid #f00;
}

经过编译生成的 CSS 文件如下：

清单 2. CSS 文件

 #header {
  color: #4D926F;
 }
 h2 {
  color: #4D926F;
 } 
body{
  border：1px solid #f00;
}