前面我们学习了《4个案例入门，学会LESS使用》，今天一起来学习如何编写，编译并使用LESS
LESS的编写
LESS的使用是很容易的，使用你最常使用的代码编辑器，按LESSCSS的语法规则写好.less文件，接下来，使用编译工具它编译成.css，最后再引入页面即可。
LESS的编译
GUI编译工具
为方便起见，建议初学者使用GUI编译工具来编译.less文件，以下是一些可选GUI编译工具：
1.koala(Win/Mac/Linux)
国人开发的LESSCSS/SASS编译工具。
下载地址：http://koala-app.com/index-zh.html
2.Codekit(Mac)
一款自动编译Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具，含语法检查、图片优化、自动刷新等附加功能。
下载地址：http://incident57.com/codekit/
3.WinLess(Win)
一款LESS编译软件。
下载地址http://winless.org/
4.SimpleLess(Win/Mac/Linux)
一款LESS编译软件。
下载地址http://wearekiss.com/simpless
Node.js库
LESSCSS官方有一款基于Node.js的库，用于编译.less文件。
使用时，首先全局安装less（部分系统下可能需要在前面加上sudo切换为超级管理员权限）：
npm install -g less
接下来就可以使用lessc来编译.less文件了：
lessc example/example.less example/example.css
更多选项可以直接运行lessc查看说明。
LESS的浏览器端使用
LESSCSS也可以不经编译，直接在浏览器端使用。
使用方法：
下载LESSCSS的.js文件：点击下载。
在页面中引入.less文件
<link rel="stylesheet/less" href="example.less" />
需要注意rel属性的值是stylesheet/less，而不是stylesheet。
引入第1步下载的.js文件
<script src="lesscss-1.4.0.min.js"></script>
CDN
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
注意：
由于浏览器端使用时是使用ajax来拉取.less文件，因此直接在本机文件系统打开（即地址是file://开头）或者是有跨域的情况下会拉取不到.less文件，导致样式无法生效。
还有一种情况容易导致样式无法生效，就是部分服务器（以IIS居多）会对未知后缀的文件返回404，导致无法正常读取.less文件。解决方案是在服务器中为.less文件配置MIME值为text/css（具体方法请搜索）。或者还有一种更简单的方法，即是直接将.less文件改名为.css文件即可。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3606.html
微信扫一扫 
支付宝扫一扫 