對於一些less的一些基本概念這裡不在贅餘，就來說說怎麼使用吧 1、首先從官網下載less的js文件，例如less.min.js 2、編寫less代碼，示例代碼如下 3、在頁面中引入css和js文件 通過以上的方式就可以在頁面中看到效果了。但是在項目要上線的時候，這樣編譯會造成卡頓，可以通過node ...
對於一些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文件，直接引入即可。
