每天一个小知识点1（less整理）

less整理

css并不能称之为一门真正的编程语言，我们一般称之为样式层叠表 （有种编程原则为DRY don't repeat yourself） 
css文件比较麻烦的地方--充斥大量的重复定义(程序员的噩梦)，不但编写的时候难组织，代码量大，随着以后规模扩大二次开发的问题更明显 最明显的一点就是无法定义变量供我们重复使用还有命名空间的问题等

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

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

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

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

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

---

1. less常规使用：

   1.  <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：

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

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

less中变量的加法

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

乘法

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

个人理解：有了变量后，以后修改要轻松很多，但是变量引用多了后，改了变量后变动地也多。我自己喜欢在主体颜色和大体布局的时候用

---

1. Mixin——掺合模式（Mixin）

是定义可以重复使用的代码块

混合模式案例：

`.set-init(@color:red,@size:10px){
background-color: @color;
font-size: @size;
 }`
`#header{
 height: 200px;
 width: 200px;
 .set-init
}`

把.set-init里面的backgroun-coloer和font-size的样式加到了#header里面去，实际效果就是

 #header{
 height: 200px;
 width: 200px;
 background-color: red;
font-size: 10px;
}

个人理解：CSS有太多的地方要重复使用，但是习惯了用群组选择器，感觉也不好控制，很少用

---

3.内嵌规则

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

以前的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;
}

个人理解：这个写法是我最喜欢的写法，一般我写个网页会用很多后代选择器，用这个过后减少了我很多写CSS的时间