css预编译器——Less的使用

 

方法一:仅介绍在客户端环境下使用的方法

1 新建test.less并引入.less该文件(和css一样在head处引入),注意rel="stylesheet/less"

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

2下载并引入less.js文件,并在head处引入,注意该文件一定要在.less文件后引入;

 <script src="js/less.js"></script>

更多用法参考http://www.bootcss.com/p/lesscss/

方法二:node.js环境并且以Hbuilder作为开发工具下使用

1 安装node.js

2 安装less,npm install -g less;

3打开hbuilder -> 工具 -> 预编译器设置 ->新建,具体步骤如下图顺序

第一步:

css预编译器——Less的使用

第二步:

css预编译器——Less的使用

第三步:注意手动输入文件后缀  .less,并单击智能完成,Hbuilder会自动添加less文件地址

css预编译器——Less的使用

第四步:下过如下,单击确定,已经执行成功

css预编译器——Less的使用

第五步:在html中使用,直接新建一个less文件(index.less),然后在head出引入正常css文件(index.css),会自动编译成.css文件,如下图

css预编译器——Less的使用

第二种方法很简单,借助Hbuilder开发工具,只需要安装node.js,即可实现less的预编译!

上一篇:CSS预处理器实践之Sass、Less大比拼[转]


下一篇:Css预处理器实践之Sass、Less大比拼