CSS框架——Less

css并不能称之为一门真正的编程语言，我们一般称之为样式层叠表（有种编程原则为DRY don't repeat yourself）   

css文件比较麻烦的地方--充斥大量的重复定义(程序员的噩梦)，不但编写的时候难组织，代码量大，随着以后规模扩大二次开发的问题更明显

最明显的一点就是无法定义变量供我们重复使用还有命名空间的问题等

为了解决这个问题，开发者编写了一种对css预处理的中间语言，可以实现一些编程语言才有的功能，然后再编译成css供浏览器识别，这样既弥补了css的缺陷，也无需设计一种新的语言(增加学习成本)

为解决这个事情，有很多框架应用而生，我们今天学习的就是其中的一种less

less框架诞生于2009年，使用javascript语言编写的一种css预处理语言，他为css赋予了编程的特性如变量/继承/运算/函数等功能

它既可以在客户端运行(这里的客户端指什么呢)还可以在服务器端运行(例如借助我们的node.js)

注意1：less的源码采用的javaScript

less的使用：
常规使用：

<link rel="stylesheet/less" type="text/css" href="less/styles.css">
<script type="text/javascript" src="js/less-1.7.1.js"></script>

注意常规写法
引入less-1.7.1.js就可以使用了

单这种做法容易出错，并且在我们的编译工具下需要配置一些东西才可以使用，我们有更好的办法，就是找第三方工具先编译一次less文件-css文件，然后再去使用
我们统一(也是目前最好的编译工具---koala工具编译)

演示考拉工具编译案例1：
<div id="header"></div>
<p></p>


style.less中

@color:red;
#header{
  height: 200px;
  width: 200px;
  background-color: @color;
}
p{
  color: @color;
}

注意在这个案例我们定义常量 使用关键字@


看看编译之后变成什么样子了  -
less中变量的加法
  

<div class="first"></div>

@number:100px;
.first{
  background-color: red;
  width: @number+100px;
  height: @number+100px;
}

乘法

@number:100px;
.first{
  background-color: red;
  width: @number*4;
  height: @number*4;
}

2：
Mixin——掺合模式（Mixin）
混合/混入
是定义可以重复使用的代码块
混合模式案例：

.set-init(@color:red,@size:10px){
    background-color: @color;
    font-size: @size;
}

#header{
  height: 200px;
  width: 200px;
  .set-init
}
p{
  .set-init
}

看看编译之后的代码


3：内嵌规则
案例3：

<div id="header">
        <div>
        <ul>
             <li>登录</li>
              <li>注册</li>
        </ul>
        </div>
       <p>hello world</p>
    </div>

想一下我们之前的css代码中怎么写的？

#header div{
    width: 200px;
    height: 200px;
    background-color: red;
}
#header ul li{
    float: left;
    list-style: none;
    margin-left: 10px;
    margin-right: 10px;
}
#header p{
        color: blue;
}

有没有感觉很烦的样子
我们用less改写一下

@color:red;
@min-div_width:200px;
@min-div-height:200px;
@min-margin:10px;
#header{
  div{
    height: @min-div-height;
    width: @min-div_width;
    background-color: @color;
 ul li{
    float: left;
    list-style: none;
    margin-left: @min-margin;
    margin-right: @min-margin;
  }
  }
 
  p{
    color: @color;
  }
}