1. less 使用
less 可直接使用浏览器解析 or 使用node 的grunt/gulp 解析成传统css 。
推荐开发环境直接使用less 文件调试， 生产环境部署解析好的css
2. less 在浏览器中的使用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <link rel="stylesheet/less" type="text/css" href="example.less" /> 6 <script src="less.min.js" type="text/javascript"></script> 7 </head> 8 <body> 9 <div class="box"> 10 啊啊c 11 <div>呵呵</div> 12 </div> 13 </body> 14 </html>
注意点：
1）一定要在less文件之后引入 less.js
2）可在引入less.js 文件之间定义less 变量，修改默认参数，例如
1 <!-- set options before less.js script --> 2 <script> 3 less = { 4 env: "development", 5 logLevel: 2, 6 async: false, 7 fileAsync: false, 8 poll: 1000, 9 functions: {}, 10 dumpLineNumbers: "comments", 11 relativeUrls: false, 12 globalVars: { 13 var1: '"string value"', 14 var2: 'regular value' 15 }, 16 rootpath: ":/a.com/" 17 }; 18 </script> 19 <script src="less.js"></script>
3. 使用grunt 解析
1 module.exports = function (grunt) { 2 grunt.initConfig({ 3 less: { 4 development: { 5 options: { 6 compress: false, 7 yuicompress: false 8 }, 9 files: { 10 "dest/example.css": "src/example.less" 11 } 12 }, 13 production: { 14 options: { 15 modifyVars: { 16 imagepath_page: '"/misc/images/"', 17 imagepath: '"/misc/images/"' 18 }, 19 compress: true, 20 yuicompress: true, 21 optimization: 2 22 }, 23 files: { 24 "dest/example.css": "src/example.less" 25 } 26 } 27 }, 28 }); 29 30 grunt.loadNpmTasks('grunt-contrib-less'); 31 grunt.registerTask('default', ['less']); 32 }
注意点：
1）开发环境可以仅使用development 的参数 ， 生产环境使用production的参数，当两者都存在时，将采用后者的参数，上文例子采用production的参数
2）