less的使用

css并不能称之为一门真正的编程语言，我们一般称之为样式层叠表（有种编程原则为DRY don't repeat yourself）
css文件比较麻烦的地方--充斥大量的重复定义(程序员的噩梦)，不但编写的时候难组织，代码量大，随着以后规模扩大二次开发的问题更明显
最明显的一点就是无法定义变量供我们重复使用还有命名空间的问题等
为了解决这个问题，开发者编写了一种对css预处理的中间语言，可以实现一些编程语言才有的功能，然后再编译成css供浏览器识别，这样既弥补了css的缺陷，也无需设计一种新的语言(增加学习成本)

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

　　

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工具编译）

　

@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
}

结果就是：
　　
#header{
  height: 200px;
  width: 200px;
  background-color:red;
　font-size:10px;
}
p{
  background-color:red;
　　font-size:10px;
}

　　

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;
  }
}