1、简介
LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。
LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。
具体语言特性详见:http://www.bootcss.com/p/lesscss/
2、LESS的安装
less安装分为两种:客户端和服务器端
a、客户端安装
在官网下载一个JavaScript 脚本文件“less.js”,然后在需要引入LESS源文件的html的<head>中加入如下的代码
<link rel="stylesheet/less" type="text/css" href="/styles.less">
<script src="/less.js" type="text/javascript"></script>
这里要注意,在引入“.less”文件时,“link”的“rel”属性要设置为“stylesheet/less”。
还要注意:less源文件一定要在“less.js”引入之前引入,这样才能保证LESS源文件正确编译解析。
b、服务器端安装
利用node的包管理器(npm)安装LESS
1、首先到Node JS的官网下载一个适合Windows 系统的安装文件
2、打开.msi文件,运行
3、检查path环境变量是否配置了Node.js,点击开始=》运行=》输入cmd=》输入命令“path”,输出结果如下
4、启动Node Js的command 控制面板直接输入命令:
$ npm install less
找到你要编译的less文件目录,编译less文件,输入如下命令:
$ lessc color.less > color.css
这时候就在文件夹下生成了 .css文件。
c、除了上面的命令转译LESS源文件之外,还有一个第三方开发的工具,比较常用的是WinLess工具,简单易用
下载地址:http://winless.org/
点击Add folder,添加要编译的less文件目录,右侧加载less文件,如果没有加载好,点击右侧窗口的Refresh,刷新目录结构。
选中要编译的less文件,compile 完成编译,如果less文件有错误,编译会失败报错,成功编译会在文件下生成相应的.css文件。