less预处理入门

在一些大型项目中我们会写到很多的css样式代码，好多都是相同的样式，重复性高，还必须写，样式越多的话，后期需要修改或者维护也挺麻烦的，这就大幅度降低了我们的开发效率。这个时候使用less预处理器就可以更高效的改变这一现状。

1.准备工作

使用less进行预处理可以使用less.js文件或者koala编译工具，这两者它们的官网上都有：
推荐大家使用koala编译工具，至于为什么请往下看！！！

1. less文件：https://raw.githubusercontent.com/less/less.js/v2.5.3/dist/less.min.js
   

2. koala编辑工具（有其他系统的版本）：http://koala-app.com/index-zh.html
   

koala编译工具官网下载非常非常慢，这里我把它下载好了放在百度网盘，大家可以自行下载：

百度网盘链接：koala编译工具
提取码：zalh

koala安装成功刚打开的页面是这样的：

不习惯英语的小伙伴可以换成中文（设置后重启koala才会生效）：

2.less.js预处理

演示模板：

  <div id="box">
	<div class="inner"></div>
  </div>

传统css代码：

<style>
	#box{
	  width:400px;
	  height:400px;
	  border:1px solid;
	  position:relative;
	}
	#box > .inner{
	  width:100px;
	  height:100px;
	  background:red;
	  position:absolute;
	  margin:auto;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
	}
</style>

页面效果：

传统的css样式一多，以后查找、维护起来就很麻烦，如果css代码也可以嵌套起来，类似JS一样，这样就会方便很多，比如这样：

  <style>
	#box{
	  width:400px;
	  height:400px;
	  border:1px solid;
	  position:relative;
	  .inner{
		width:100px;
		height:100px;
		background:red;
		position:absolute;
	    margin:auto;
		top:0;
		left:0;
		right:0;
		bottom:0;
	  }
	}
  </style>

但是这样浏览器解析不出来，所以我们要引入less.js文件：

  <style type="text/less">
	#box{
	  width:400px;
	  height:400px;
	  border:1px solid;
	  position:relative;
	  .inner{
		width:100px;
		height:100px;
		background:red;
		position:absolute;
	    margin:auto;
		top:0;
		left:0;
		right:0;
		bottom:0;
	  }
	}
  </style>
  <script src="less/less.min.js"></script>

注意：引入less.js的时候一定要放在样式表的后面，并且样式表需要添加type="text/less"属性才会成功。

外部引用的时候也是这样：

<link rel="stylesheet/less" href="index/index.less">
<script src="less/less.min.js"></script>

注意：引入外部less文件，使用less.js进行编译的时候要在web环境下才能测试，否则less.js会被认为是跨域请求，会报错。Chrome就是这样设计的，各个浏览器设计不一样，在IE浏览器下可以成功运行。

但是我们不提倡直接将 less文件引入页面，因为 less文件需要进行编译，因此你就需要再引入一个less.js，多了一个HTTP 请求，如果浏览器禁用了 JS， 你的样式就不起作用了。less文件应该在引入页面前编译好，这才是开发人员最认可的，下面我们来看看koala编译less是怎样操作的。

3.koala编译less

koala编译less，最终会自动生成less相对应的css文件，不需要引入less.js，在html页面直接引入less文件通过koala编译生成的css文件就行了！！！

<link rel="stylesheet" type="text/css" href="css/index.css">

我们想先写一个index.less文件：

#box{
  width:400px;
  height:400px;
  border:1px solid;
  position:relative;
  .inner{
    width:200px;
    height:100px;
    background:red;
    position:absolute;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
  }
}

然后把index.less放在css文件夹中：

将css直接拖入koala中，点击更新就行了：

这个时候再css文件夹下就会自动生成index.less对应的index.css文件：

打开index.css文件：

#box {
  width: 400px;
  height: 400px;
  border: 1px solid;
  position: relative;
}
#box .inner {
  width: 200px;
  height: 100px;
  background: red;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

这就是编译好的index.css文件。

点击koala中的less文件：

一般我们都把自动编译选择上的，每次更改index.less文件保存的时候，koala就会对index.less文件进行编译，从而修改对应index.css里的内容。

less还存在变量、嵌套规则、混合、继承等等，都可以通过koala编译成相关的css文件，大大提高开发人员的效率。

注意：用koala编译less时，一定要把存放less文件的文件夹一起放入koala中，单独把less文件放入koala是放不进去的。下面红色箭头指的是当前less编译出的css文件以及它存放的位置，通常都在less文件存放的文件夹中，如果不在或者想改变生成得css文件的位置，可以通过右键选择设置输出路径或者点击红色箭头旁边的小图标自行设置css文件存放的位置。