对于一些less的一些基本概念这里不在赘余，就来说说怎么使用吧
1、首先从官网下载less的js文件，例如less.min.js
2、编写less代码，示例代码如下
@color:#eee; @white-color:#fff; .transform-scale(@val:1){ -webkit-transform:scale(@val); -moz-transform:scale(@val); -ms-transform:scale(@val); -o-transform:scale(@val); transform:scale(@val); } .transition(@property:all,@duration:1s,@time-function:linear,@delay:1s){ -webkit-transition:@arguments; -moz-transition:@arguments; -ms-transition:@arguments; -0-transition:@arguments; transition:@arguments; } html,body{ width:100%; height:100%; background:@white-color; } .box{ color:@color; width:200px; height:200px; border:1px solid @color; background:#dedede; .transition(@duration:.3s); &:hover{ .transform-scale(@val:1.5); } }
3、在页面中引入css和js文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet/less" href="index.less" charset='utf-8'> </head> <body> <div class='box'></div> <script> //对less进行一些简单的配置，保证在1s的时间自动更新 var less = { env:'development', poll:1000 } </script> <script charset='utf-8' src='less.min.js'></script> <script> less.watch();//配置less监听 </script> </body> </html>
通过以上的方式就可以在页面中看到效果了。但是在项目要上线的时候，这样编译会造成卡顿，可以通过node来把less文件编译成css文件然后重新引入。
安装less模块
npm install less -g
编译less文件为css文件
lessc index.less index.css
这样文件中就会生成一个index.css文件，直接引入即可。